vue3.0全局和按需引入element-plus

1.先来看一下未添加element-plus的干净项目打包后文件大小
2.全局安装element-plus
npm install element-plus --save
在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.按需引入element-plus
借助 babel-plugin-import，我们可以只引入需要的组件，以达到减小项目体积的目的。
npm install babel-plugin-import -D
npm install sass sass-loader

在main.js里引入

import 'element-plus/packages/theme-chalk/src/base.scss'

备注：在这里引入之后，会报错：在sass文件中提示Syntax Error : this.getOptions is not a function
原因：npm sass-loader时版本安装的太高，导致报错。这里先执行npm uninstall sass-loader@12.1.0
再执行Npm install sass-loader@10.1.1版本即可解决。

在babel.config.js里引入

module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
      },
    ],
  ],
};

最后，element-plus按需加载完成。使用方法：

import { createApp } from 'vue'
import App from './App.vue'
// 这是全局的安装方法
// import ElementPlus from 'element-plus'
// import 'element-plus/lib/theme-chalk/index.css'
// const app = createApp(App)
// app.use(ElementPlus)
//这里是按需要加载引入代码
import 'element-plus/packages/theme-chalk/src/base.scss'
import { ElButton } from 'element-plus'
const components = [ElButton]

const app = createApp(App)
components.forEach(component => {
  app.component(component.name, component)
})
app.mount('#app')

看，按需要引入比全局引入打包后的文件从1.01M，缩小到240M.