Element---vue-cli@4配置element-ui按需引入

参考地址：《Vue-cli4 配置 element-ui 按需引入》

安装完element-ui后，如果完整引入，不按需加载其组件，打出的包会很大，这很影响性能。

下面，按照官方的教程，我们来操作一下，如何配置element-ui按需加载组件。

首先要添加babel-plugin-component依赖，代码如下：

npm install babel-plugin-component -D

下面就该写plugins配置项了，这就是重点了，按照官方的教程，一定会失败，因为官方是按照vue-cli@3写的，在vue-cli@4环境下，我们需要修改babel.config.js文件，代码如下：

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

之后就是在main.js中按需引入组件了，示例代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import {
  Dialog,
  Table,
  TableColumn,
  Tag,
  Container,
  Header,
  Main,
  Row,
  Col
} from 'element-ui'

Vue.use(Dialog)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Tag)
Vue.use(Container)
Vue.use(Header)
Vue.use(Main)
Vue.use(Row)
Vue.use(Col)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

—完—