當(dāng)我們使用elementui橄唬,又不想全部導(dǎo)入需五,而是按需導(dǎo)入時,可以使用一下步驟:
安裝 babel-plugin-component
npm install babel-plugin-component -D
配置babel轧坎,修改babel.config.js文件的內(nèi)容(或者有/.babelrc文件則修改這個文件)
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}
創(chuàng)建element.js文件
1.可以創(chuàng)建一個element文件夾宏邮,然后下面創(chuàng)建index.js文件
2.也可以創(chuàng)建一個plugins文件夾,然后下面創(chuàng)建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)
// 下面這種寫法是項(xiàng)目中的$xxx都被elementui對應(yīng)的組件所替換
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)