准备工作

安装依赖

• unplugin-auto-import 自动导入模块
• unplugin-vue-components 自动导入vue组件
• unplugin-icons 自动导入图标

npm install -D unplugin-auto-import # 自动导入模块
npm install -D unplugin-vue-components # 自动导入vue组件
npm install -D unplugin-icons # 自动导入Icon
npm install -D @iconify-json/ep # 安装图标库（https://icones.netlify.app/）

修改tsconfig.json

指定types

"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts"]
"compilerOptions": {
   "types": ["vite/client", "element-plus/global", "unplugin-icons/types/vue"]
}

修改vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 需要自动导入的文件
      include: [/\.[tj]sx?$/, /\.vue$/],
      // 解析器，支持UI组件库自动导入
      resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
        // IconsResolver({
        //   prefix: 'Icon'
        // })
      ],
      // 自动导入的文件名
      imports: ['vue'],
      // 指定生成.d.ts的位置
      dts: 'src/auto-imports.d.ts'
    }),
    Components({
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
          prefix: '', // 默认前缀是i
          enabledCollections: ['ep'] // 选择图标库集合 ep
        }),
        ElementPlusResolver(),
      ],
      // 需要自动导入组件的目录
      dirs: ['src/components', 'src/views'],
      // 文件后缀
      extensions: ['vue'],
      // 指定.d.ts生成的位置
      dts: 'src/components.d.ts',
      // 深度扫描
      deep: true,
      // 需要自动导入的文件
      include: [/.vue$/, /.vue?vue/]
    }),
    Icons({
      autoInstall: true, // 自动安装
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

在组件中使用

无需进行手动import

<template>
    <EpApple />
    <ep-add-location />
    <EpRefresh />
</template>