配置 Vite 自动导入 ElementPlus 组件、函数、Icons、样式

使用 Vite 的自动导入的前提是项目是 TS 项目，JS 项目使用 Vite 自动导入不生效。安装以下 5 个包到 devDependencies：

cnpm i -D unplugin-icons unplugin-auto-import @iconify-json/ep unplugin-auto-import unplugin-vue-components

配置vite.config.ts：

// vite.config.ts
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
// element plus
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
// icons
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动导入 vue 相关 api
      imports: ["vue"],
      resolvers: [
        // 自动导入 element plus 的函数、如 elmessage
        ElementPlusResolver(),
        // 图标导入
        IconsResolver({
          prefix: "Icon"
        })
      ]
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 图标导入，通过 i-ep-xxx 格式使用 element plus 图标
        IconsResolver({
          enabledCollections: ["ep"]
        })
      ],
      // 自动导入的组件包含文件夹，扫描该文件夹下所有 .vue 文件
      dirs: ["./src/components/**"]
    }),
    Icons({
      autoInstall: true
    })
  ]
});

在组件模板中使用 element-plus 的图标集：

<i-ep-search />
<!-- 或者 -->
<IEpSearch />

如果 Element-Plus 组件没有提供图标插槽，图标不能自动导入到 props 中，还是需要自己手动导入。比如：

<el-popconfirm
  confirm-button-text="确定"
  cancel-button-text="取消"
  icon-color="#626AEF"
  :icon="InfoFilled"
  title="确定删除该评论？"
>
</el-popconfirm>

上面的组件没有提供 icon 插槽，提供图标只能通过 props，InfoFilled 改成 IEpInfoFilled 的话不能被识别，需要导入该图标：

import { InfoFilled } from "@element-plus/icons-vue";

main.ts 无需引入 element-plus 的 index 文件和app.use(ElementPlus);。避免编辑器和 TS 编译器误报错，需要在tsconfig.json文件里写两个文件的路径：

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