element-ui 按需引入

element-ui 按需引入说明

1.新建vue项目

npm i -g @vue/cli

vue create my-app
cd my-app

2.安装element-ui

yarn add element-ui
yarn 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 config
Object.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')