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中使用

<template>
  <el-config-provider :locale="locale">
      <router-view/>
  </el-config-provider>
</template>
<script lang='ts' setup>
import {reactive} from "vue";
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const {locale} = reactive({
  locale: zhCn
})
</script>