elementUI按需引入

我们项目组件库用的是ant design vue

ant design vue实现不了需求的xxx功能，就用element ui组件，全部引入运行和打包都明显的慢了很多，决定使用按需引入

1. npm i element-ui(-D-S根据需要来定)

2.安装 babel-plugin-component

npm install babel-plugin-component -D

3.将 .babelrc文件或babel.config.js 做如下配置：

module.exports = {
  presets: [
    '@vue/app',
    [
      '@babel/preset-env',
      {
        'useBuiltIns': 'entry'
      }
    ],
  ],
  // if your use import on Demand, Use this code
  // ,
  plugins: [
    [ 'import', {
      'libraryName': '@idc-design/web-ui',
      'libraryDirectory': 'es',
      'style': true // `style: true` 会加载 less 文件
    } ],
    [ 'import', {
      'libraryName': '@gwm/gwm-ui',
      'libraryDirectory': 'es',
      'style': true // `style: true` 会加载 less 文件
    }, 'gwm-ui' ],
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    '@babel/plugin-proposal-optional-chaining'
  ]
}

4.按需引入

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
 
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
new Vue({
  el: '#app',
  render: h => h(App)
});

Babel教程1 - 知乎

Options · Babel 中文网