vue3使用element-plus按需引入时参数配置

在vue-cli中使用vue3+element-plus时，全量引入很容易，但在按需引入时，官方文档的说明有些不详细。

现实中，我们大多都使用按需引入，接下来我们按步骤说明：

第一步：下载安装unplugin-vue-components 和 unplugin-auto-import这两款插件：

命令：npm install  unplugin-vue-components unplugin-auto-import -d

第二步：修改webpack的配置文件，但是问题是Vue默认隐藏了webpack的配置，只对外提供了vue.config.js文件供用户修改。

官方只提到在webpack.config.js中进行修改，事实上是不存在这个文件的。此时我们就需要在Vue默认提供的vue.config.js中去完成配置：

查看Vue-cli的配置参考，有一个配置项为：configurewebpack，文档为：https://cli.vuejs.org/zh/config/?#configurewebpack

那么，接下来，我们修改vue.config.js文件即可：

const {defineConfig} = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    configureWebpack:{
        plugins: [
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
        ]
    }
})

即：添加configureWebpack配置项，然后在configureWebpack配置项中写官方提供的配置信息。

接着下来，修改我们的main.js文件如下：

import {createApp} from 'vue'
import App from "@/App";

const app = createApp(App)
// Element-plus
import {ElButton} from 'element-plus'
app.use(ElButton)

app.mount('#app')

即可使用element-plus的按需引入了，在控制台查看网络选项，会发现，引入的文件体积小了很多。