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

你需要安装一下依赖：

1. unplugin-icons
2. unplugin-auto-import
3. @iconify-json/ep
4. unplugin-auto-import
5. unplugin-vue-components
6. @element-plus/icons-vue

以下安装到 devDependencies：

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

只有一个需要安装到 dependencies：

cnpm i @element-plus/icons-vue

推荐通过 cnpm 下载安装，npm 有些慢。根据个人网络状况来！

配置vite.config.ts：

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

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue"],
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: "Icon"
        })
      ]
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          enabledCollections: ["ep"]
        })
      ],
      dirs: ["./src/components/**"]
    }),
    Icons({
      autoInstall: true
    })
  ]
});

在模板中使用：

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

自动导入的图标不能插入到 props 中，如果 Element-Plus 组件提供 icon 插槽就可以用，否则还是需要自己手动导入。比如：

<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);。