（004）Vue 3.x 全量 & 按需引入ElementPlus

1、安装ElementPlus

cnpm install element-plus --save

2、将ElementPlus引入到main.js代码中

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3、全量引入ElementPlus前后构建对比

4、按需引入ElementPlus

4.1 安装babel-plugin-component插件

cnpm install babel-plugin-component -D

4.2 main.js代码修改

import { createApp } from 'vue'
import { ElButton, ElSelect } from 'element-plus';
import App from './App.vue';

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);

/* or
 * app.use(ElButton)
 * app.use(ElSelect)
 */

app.mount('#app')

4.3 增加.babelrc文件 & 按需引入前后构建对比图

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-plus",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

5、build后运行结果如图