当我们使用elementui,又不想全部导入,而是按需导入时,可以使用一下步骤:
安装 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'
}
]
]
}
创建element.js文件
1.可以创建一个element文件夹,然后下面创建index.js文件
2.也可以创建一个plugins文件夹,然后下面创建element.js文件
主要是用来管理element-ui的配置在这个文件中引入需要使用的elementui组件,比如:
// 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)
// 下面这种写法是项目中的$xxx都被elementui对应的组件所替换
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$message = Message
}
}
export default element
- 在 main.js 中使用element.js文件,比如
import element from './plugins/element'
Vue.use(element)