将element-ui由全引入改为按需引入

将element-ui由全引入改为按需引入

1. 下载 babel-plugin-component插件。element官网上面就说了按需引入需要借助该插件。
2. 编辑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

3. 在main.js中引入element.js文件

import './plugins/element'

4. 修改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全局挂载一下就可以了