elementUI按需引入elementUI按需引入。elementUI按需引入。elementUI按需引入。eleme

执行npm

npm i element-ui
npm install babel-plugin-component -D

修改.babelrc或babel.config.js

module.exports = {
 ...
  //这里不能少，否则项目不报错但是组件也没有样式，局部引入不会生效
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

新建element.js

// 导入自己需要的组件
import {
  Dialog,
  Button,
  Form,
  FormItem
} from 'element-ui';
const elementList = [
  Dialog,
  Button,
  Form,
  FormItem
];
const ElementUI = {
  install: function(Vue) {
    elementList.forEach(component => {
      Vue.use(component);
    });
    // 放置内存泄漏
    Vue.hasAdminPageImportedElement = true;
  }
};

export default ElementUI;

新建element.scss

/* 按需引入element依赖样式 和element.js组件对应 */
@import '~element-ui/packages/theme-chalk/src/base.scss';
@import '~element-ui/packages/theme-chalk/src/dialog.scss';

在main.js引入建的element

import ElementUI from 'element.js';
import 'element.scss';
Vue.use(ElementUI);

element官网：element.eleme.cn/#/zh-CN/com…