unplugin-vue-components 插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件），作者是Vite生态圈大名鼎鼎的Anthony Fu。使用此插件后，不需要手动编写 import { Button } from 'ant-design-vue'这样的代码了，插件会自动识别template中使用的自定义组件并自动注册。
unplugin-vue-components官网：https://github.com/antfu/unplugin-vue-components#readme
1、安装unplugin-vue-components
命令如下，-D表示该依赖添加在package.json里面的devDependencies。
devDependencies下的依赖包，只是我们在本地或开发坏境下运行代码所依赖的，若发到线上，其实就不需要devDependencies下的所有依赖包；(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包。
npm install unplugin-vue-components -D
在webstorm里面的Terminal输入npm install unplugin-vue-components -D命令安装该依赖。
2、vite.config.js中使用unplugin-vue-components/vite
官网提供的配置属性如下:
Components({
// relative paths to the directory to search for components.
dirs: ['src/components'],
// valid file extensions for components.
extensions: ['vue'],
// Glob patterns to match file names to be detected as components.
// When specified, the `dirs` and `extensions` options will be ignored.
globs: ['src/components/*.{vue}'],
// search for subdirectories
deep: true,
// resolvers for custom components
resolvers: [],
// generate `components.d.ts` global declarations,
// also accepts a path for custom filename
// default: `true` if package typescript is installed
dts: false,
// Allow subdirectories as namespace prefix for components.
directoryAsNamespace: false,
// Collapse same prefixes (camel-sensitive) of folders and components
// to prevent duplication inside namespaced component name.
// works when `directoryAsNamespace: true`
collapseSamePrefixes: false,
// Subdirectory paths for ignoring namespace prefixes.
// works when `directoryAsNamespace: true`
globalNamespaces: [],
// auto import for directives
// default: `true` for Vue 3, `false` for Vue 2
// Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
// To install Babel, run: `npm install -D @babel/parser`
directives: true,
// Transform path before resolving
importPathTransform: v => v,
// Allow for components to override other components with the same name
allowOverrides: false,
// filters for transforming targets
include: [/\.vue$/, /\.vue\?vue/],
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
// Vue version of project. It will detect automatically if not specified.
// Acceptable value: 2 | 2.7 | 3
version: 2.7,
// Only provide types of components in library (registered globally)
types: []
})在vite.config.js添加如下代码：
//使用unplugin-vue-components/vite按需加载自定义组件
import Components from 'unplugin-vue-components/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
Components({
dirs: ['src/components'], // 指定组件位置,默认指定文件夹是src/components
extensions: ['vue'], // 组件的有效文件扩展名
deep: true, // 搜索子目录
dts: 'src/components/components.d.ts', //配置文件生成位置,默认情况下启用,如果为true,表示默认生成到根目录文件下,false为不生成该文件,这里我没有安装ts,生成ts文件发现并没有报错,测试打包发现也没有报错
//resolvers: [], // 自定义组件的解析器,可以将ElementPlus组件改为到这个里面使用
//directoryAsNamespace: false, // 允许子目录作为组件的命名空间前缀
//globalNamespaces: [], // 忽略命名空间前缀的子目录路径,当directoryAsNamespace: true 时有效
//directives: true, //需要 Babel 来为 Vue 2 进行转换，出于性能考虑，它默认处于禁用状态。
//include: [/.vue$/, /.vue?vue/],
//exclude: [/[\/]node_modules[\/]/, /[\/].git[\/]/, /[\/].nuxt[\/]/],
})
],
})启动项目后才会生成components.d.ts，文件位置如下：
删除掉之前项目中以下代码和文件，使用unplugin-vue-components/vite来代替全局组件的使用。
到这里使用unplugin-vue-components/vite来使svg-icon组件进行全局引用的目的就达成了，后面如果还需要添加其他组件，直接在/src/components下添加相应组件文件即可。它会自动添加到components.d.ts文件里面。
注意：如果你把项目中/src/components下的svg-icon的组件文件夹给删除了，components.d.ts里面并不会自动删除SvgIcon: typeof import(‘./svg-icon/index.vue’)[‘default’]这句代码，需要自己手动进行删除。