Vue使用elementUI按需加载

一、前期配置

下载:

npm i element-ui --save

或yarn add element-ui

下载babel-plugin-component，实现elementUI的按需加载

yarn add babel-plugin-component

element/index.js:

// 导入自己需要的组件
import { Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col, Menu,MenuItem,MenuItemGroup,Popover,Button,
    Container,Aside,Main,Footer,Divider,Tooltip,Table,TableColumn,Loading} from 'element-ui'
import Vue from 'vue';
Vue.use(Container);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Popover);
Vue.use(Button);
Vue.use(Menu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Input);
Vue.use(Tree);
Vue.use(Dialog);

main.js

import 'element-ui/lib/theme-chalk/index.css'
import  './element/index.js'

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

二、正式使用

每次使用都在element/index.js中引用elementUI相关不同的组件