element按需引入

276 阅读1分钟

新建babel.config.js

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

新建element.js

import Vue from 'vue'

import { 
  Button,
  Badge,
  Dialog,
  Input,
  Table,
  TableColumn,
} from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'mini', zIndex: 200 };

const components = [
  Button,
  Badge,
  Dialog,
  Input,
  Table,
  TableColumn,
]

components.forEach(component => {
  Vue.component(component.name, component)
})

将element.js在main.js中引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import "@css/flex.css";
import "@css/reset.css";
import "@js/element.js";
import "@js/prototype.js";

//全局过滤器
import "./util/filter.js";

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");