Element ui 以及Echart 在vue项目里的按需引入

有时候一个项目中可能需要的相关echart以及element组件不是很多，这时候可以尝试使用组件的按需引入，优化打包部署后后页面打开的流畅度。

1.Element ui的按需引入（先使用npm/cnpm/yarn安装element ui,这里不详细描述)

(1)安装 babel-plugin-component插件

npm install babel-plugin-component -D

 安装后可以在package.json文件里看到

(2)在babel.config.js文件里配置如下

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

 (3)在main.js里全局引入

import { Button, Select,Popover } from 'element-ui';//此处按需引入，需要啥引入啥
Vue.use(Button)
Vue.use(Select)
Vue.use(Popover)//别忘了use

2.Echarts的按需引入(先使用npm/cnpm/yarn安装echarts，这里不详细描述)

 (1)在utils文件夹里添加echarts.js文件(文件名自定义)

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表等，图表后缀都为 Chart
import { BarChart, LineChart, PieChart,PictorialBarChart} from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
 
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart, 
  PieChart, 
  PictorialBarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
 
export default echarts  //官网中没有，记得写

(2)在main.js文件里全局引入

import echarts  from './utils/echarts';//按需引入
Vue.prototype.$echarts = echarts