Vue3 Cli5按需导入ElementPlus

1、安装环境

node：16.20.0
vue：3.2.36
vue/cli：5.0.0
element-plus：2.2.25
element-plus/icons-vue：2.0.10
unplugin-auto-import：0.16.1 // 当前环境用这个包，不然会提示各种错误
unplugin-vue-components：0.25.0 // 当前环境用这个包，不然会提示各种错误

2、vue.config.js

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

3、配置完后，重新运行npm run serve。会在根目录下生成auto-imports.d.ts和components.d.ts。

4、配置tsconfig.json。在include中新增以下两项

{
    "include": [
        "auto-imports.d.ts",
        "components.d.ts"
    ]
}

5、由于elementPlus的Icon如果按需引入的话，会破坏最终的使用方式。因此这里按照全局引入的形式使用

// main.ts
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    // @ts-ignore
    app.component(key, component)
}

6、到这里其实可以使用了，但是运行后样式会丢失，因此需要再main.ts中再引入样式文件

import 'element-plus/dist/index.css'

7、国际化，目前有三种引入方式。

7.1、第一种全局引入，但是需要全局导入element-plus。这会破坏按需引入。

7.2、在使用的每个组件中，导入locale。太麻烦了。

7.3、目前我在使用的，在App.vue中使用