vue3 element-plus按需引入（webpack）优雅用法

1.安装

npm install -D unplugin-vue-components unplugin-auto-import

2.配置vue.config.js

注意要放在configureWebpack里，不然会报错“plugins” is not allowed，这里官网未提示

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
	configureWebpack: {
	  plugins: [
	    AutoImport({
	      resolvers: [ElementPlusResolver()],
	    }),
	    Components({
	      resolvers: [ElementPlusResolver()],
	    }),
	  ],
  }
}

3.删除全局引入

如果之前你是全局引入，那么现在你可以把这些删掉了，因为Element-plus已使用按需引入，插件会自动挂在处理，组件标签（el-input, el-button等）无需引入即可在页面使用。

这样做的目的是减少打包后的体积（使用了哪些组件会自动按需引入，减少未使用而引入的组件），提高加载效率

坑点：

1. 按需引入用了插件unplugin-vue-components，因此写ElMessage这样的写在JS文件里的组件识别不到css文件，会出现

解决：main.js里引入import 'element-plus/theme-chalk/el-message.css
也可以全局引入样式 import ‘element-plus/dist/index.css’

2. 当然icon组件还需单独再引入

import { UserFilled, Lock, Right } from "@element-plus/icons-vue";
使用，如：<el-icon><right /></el-icon>