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

44次阅读

共计 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')

—完—

正文完
 0