elementui-按需引入

element-ui 按需引入说明

1.新建vue项目

npm i -g @vue/clivue create my-appcd my-app

2.安装element-ui

yarn add element-uiyarn add babel-plugin-component -D

3.修改 babel.config.js

如果没有这个文件,创建一个即可

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

4.修改main.js

import Vue from 'vue'import ElementUI from 'element-ui'// 样式文件还是要全部引入,目前没有找到好的方法import 'element-ui/lib/theme-chalk/index.css'import lang from 'element-ui/lib/locale/lang/zh-CN'import locale from 'element-ui/lib/locale'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = false// element-ui configObject.entries(ElementUI).forEach(([key, component]) => {  if (/^[A-Z]+/.test(key)) {    switch (key) {      case 'Loading':        Vue.use(component.directive)        Vue.prototype.$loading = component.service        break      case 'Notification':        Vue.prototype.$notify = component        break      case 'Message':        Vue.prototype.$message = component        break      case 'MessageBox':        Vue.prototype.$msgbox = component        Vue.prototype.$alert = component.alert        Vue.prototype.$confirm = component.confirm        Vue.prototype.$prompt = component.prompt        break      default:        Vue.use(component)    }  }})Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }locale.use(lang)new Vue({  router,  store,  render: h => h(App)}).$mount('#app')