17 | 实战痛点3：Vue 3中如何集成第三方框架

你好，我是大圣。

在上一讲中，我给你介绍了如何在 Vue 3 中实现页面和接口的权限管理。我们把 vue-router 的动态路由、导航守卫、axios 的接口拦截等功能配合到一起使用，实现了页面的权限控制，这也算是 Vue 中进阶使用 vue-router 和 axios 的一个方式。

今天，我们再来学习另一个进阶玩法，聊一下如何在 Vue 3 中使用和引入更多的框架。可别小看这里的门道，有的第三方工具框架跟 Vue 耦合性不高，而有的需要做适配，这一讲我就详细给你说说实操中的注意事项，帮助你在提高开发效率的同时少走弯路。

独立的第三方库

首先我们要介绍的第三方框架是 axios，这是一个完全独立于 Vue 的框架，我们可以使用 axios 发送和获取网络接口数据。在 Vue、React 框架下，axios 可以用来获取后端数据。甚至在 Node.js 环境下，也可以用 axios 去作为网络接口工具去实现爬虫。

axios 这种相对独立的工具对于我们项目来说，引入的难度非常低。通常来说，使用这种独立的框架需要以下两步。

以页面进度条工具 NProgress 为例，第一步是，我们先进入到项目根目录下，使用下面的命令去安装 NProgress。

npm install nprogress -D

第二步，就是在需要使用 NProgress 的地方进行 import 的相关操作，比如在页面跳转的时候，我们就需要使用 NProgress 作为进度条。导入 NProgress 库之后，我们就不需要使用 Vue3 的插件机制进行注册，只需要通过 router.beforeEach 来显示进度条，通过 afterEach 来结束进度条就可以了。

import NProgress from 'nprogress' // progress bar
router.beforeEach(async (to, from, next) => {
  // start progress bar
  NProgress.start()
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

在项目中，我们之后还会依赖很多和 NProgress 类似的库，比如处理 Excel 的 xlsx 库，处理剪切板的 clipboard 库等等。

组件的封装

下面我们以可视化组件为例，来分析复杂组件的封装。之所以选择可视化组件为示例，是因为管理系统中的统计数据、销售额数据等等，都喜欢用饼图或柱状图的方式来展示。

虽然可视化本身和 Vue 没有太大关系，但我们需要在页面中以组件的形式显示可视化图表。对此，我们的选择是用可视化框架 ECharts 去封装 Vue 的组件，来实现可视化组件。

我们再简单介绍一下可视化框架的使用方式，不管你选择用百度的 ECharts，还是蚂蚁的 G2 等框架，在框架的使用方法上，都是类似的。首先，你需要完成图表库的配置，并且填入图表数据，然后把这个数据渲染在一个 DOM 上就可以了。

下面的代码展示了一个 ECharts 的入门案例，代码中我们首先使用 echarts.init 初始化一个 DOM 标签；然后在 options 中配置了图表的结构，包括标题、x 轴等；并且我们还通过 series 配置了页面的销量数据；最后使用 myChart.setOption 的方式渲染图表就可以了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

看上面的代码，我们先配置好图表需要的数据，然后使用 setOption 初始化图表，之后在浏览器中打开项目主页面，就可以看到下图所示的这种可视化结果。在你理解了 ECharts 的使用方法后，下一个要解决的问题是，我们该如何在 Vue 3 中集成这个框架呢？答案就是我们自己实现与 ECharts 对应的 Vue 组件即可。