Vue3使用全量 & 按需引入ElementPlus组件库

Vue 3.x 中，无论是Element UI还是ElementPlus，均使用按需引入的方式，减少打包出来的体积，提升页面加载速度。本文会详细介绍Vue3如何全量引入和按需引入ElementPlus组件库，这对于Element UI用户了解ElementPlus的用法会有一定的帮助。

1. 全量引入ElementPlus

先下载ElementPlus组件库，引入element-plus即可：

npm i element-plus

然后再在main.js中引入ElementPlus：

import Vue from "vue"
import App from "./App.vue"
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';

Vue.use(ElementPlus)

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

2. 按需引入ElementPlus

下载ElementPlus组件库，并引入相关功能：

npm i element-plus
npm i babel-plugin-import

安装完成，编辑babel.config.js文件：

module.exports = {
  plugins: [
    ['babel-plugin-import', {
      libraryName: 'element-plus',
      customStyleName: (name) => {
        return `element-plus/lib/theme-chalk/${name}.css`
      }
    }]
  ]
}

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

npm run build  // 全量构建前
npm run build  // 全量构建后

npm run serve  // 按需构建前
npm run build  // 按需构建后

可以看到，使用按需引入后的项目体积减少了33.47kb，有利于提升页面的加载速度。

4. 按需引入ElementPlus

引入按钮组件：

import { Button } from 'element-plus';
export default {
  components: { Button }
}

此时按需加载Button组件，但是还需要引入Button的样式文件：

/* 样式文件 */
@import 'element-plus/lib/theme-chalk/button.css';

最终，按需引入ElementPlus的写法如下：

import { Button } from 'element-plus';
export default {
  components: { Button }
}

/* 样式文件 */
@import 'element-plus/lib/theme-chalk/button.css';