vue按需引入element-ui
2020-08-26 本文已影响0人
十年码农的觉醒
怎么安装看element-ui 官方文档
按需引入
第一步
安装 babel-plugin-component
npm install babel-plugin-component -D
第二步
配置babel,修改babel.config.js/.babelrc文件
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}
第三步
1.在 src 文件夹中新建我们的 element 文件夹,并在里面新建一个 index.js 文件
2.在index文件中去书写我们需要引入的部分组件
3.在 main.js 中使用该文件,就大功告成了
// element/index.js
import { Button, Select, Switch, MessageBox, Message } from 'element-ui'
const element = {
install: function(Vue) {
Vue.use(Button)
Vue.use(Switch)
Vue.use(Select)
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$message = Message
}
}
export default element
// main.js
import element from './element/index'
Vue.use(element)