关于element-ui:Elementvuecli4配置elementui按需引入

50次阅读

共计 845 个字符，预计需要花费 3 分钟才能阅读完成。

参考地址：《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')

—完—

正文完