将element-ui由全引入改为按需引入
- 下载 babel-plugin-component插件。element官网上面就说了按需引入需要借助该插件。
- 编辑plugins/element.js文件,对于项目中用到的各种组件,需要在该文件中使用,才不会报错
import Vue from 'vue'
import { Upload, DatePicker, DropdownMenu, DropdownItem, Dropdown, Select, Option, Button, Form, FormItem, Input, Message, MessageBox, Header, Container, Aside, Main, Menu, Submenu, MenuItem, MenuItemGroup, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table, TableColumn, Switch, Tooltip, Pagination, Dialog, Tag } from 'element-ui'
Vue.use(Upload)
Vue.use(DatePicker)
Vue.use(Dropdown)
Vue.use(DropdownItem)
Vue.use(DropdownMenu)
Vue.use(Option)
Vue.use(Select)
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(TableColumn)
Vue.use(Table)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.prototype.$MessageBox = MessageBox
Vue.prototype.$message = Message
- 在main.js中引入element.js文件
import './plugins/element'
- 修改bable.config.js文件
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
//这里不能少,否则项目不报错但是组件也没有样式,局部引入不会生效
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}
到这里,element由全引入改成按需引入就成功了,页面中使用某个组件,只要你在element.js中引入该组件,然后Vue.use/Vue全局挂载一下就可以了