共计 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')
—完—
正文完
发表至: element-ui
2022-08-10