unplugin-vue-components在vite中的使⽤和配置
unplugin-vue-components 是由 Vue官⽅⼈员开发的⼀款⾃动引⼊插件，可以省去⽐如 UI 库的⼤量 import 语句。
安装
npm i unplugin-vue-components -D
配置
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
Components({
dirs: ['src/components'], // 配置需要默认导⼊的⾃定义组件⽂件夹，该⽂件夹下的所有组件都会⾃动 import
resolvers: [AntDesignVueResolver({ importStyle: false, resolveIcons: true })]
})
]
}
antdesignvue 表格合计这⾥以 ant-design-vue 为例，引⼊包⾥⾃带的 AntDesignVueResolver 函数（主流的 UI 都有内置，如果没有的话可以⾃⼰实现⼀个 resolver）。importStyle 指是否需要⾃动随引⼊加载对应的组件样式，我这⾥设置为 false，因为某些⼆级组件（⽐如 DateRangePicker）没办法准确地识别正确路径，他的搜寻路径都是按⼀级组件来写的，所以我改成了全量导⼊ css。resolveIcons 配置是否对 antd 的图标起作⽤。
配置完 js 引⼊，如果使⽤ ts 写项⽬的话，当然就要考虑类型的问题了，⾃动引⼊确实可以省略引⼊，但是这样也失去了类型提⽰。antv 提供了⼀个 global.d.ts 类型声明⽂件（实测 element-plus 也提供了这⼀类型⽂件)，只需要在 tsconfig 的 types 项下添加 ant-design-vue/typings/global 即可提供组件的类
型声明。没有引⼊也有组件类型提⽰：
想必你已经看到了 dirs 这个配置项了，他不仅可以实现 UI 框架⾃动引⼊，还⽀持你⾃⼰项⽬中开发的公共组件⾃动引⼊。dirs 这个配置的默认值就是src/components，如果你想取其他的⽂件夹名也是可以的，在检测到你在使⽤ ts 之后，他会⾃动在项⽬根⽬录⽣成⼀个 compnents.d.ts ⾥⾯即是根据组件内容⽣成的类型声明，为 volar 提供类型提⽰，他会⾃动根据⽂件变动进⾏更新。（注意：compnents.d.ts ⽂件会在 vue-tsc 运⾏的时候进⾏更新，建议把他加⼊ gitignore 中，以免出现频繁更改导致 git 监测到项⽬内容⼀直变动的问题）
注意事项
这个包⼤⼤地简洁了业务代码，以后再也不⽤写⼀⼤堆的 import 了，但是所有的这⼀切都基于你写的是 Vue 单⽂件组件，如果是喜欢⽤ jsx 编写 Vue 代码的童鞋，那他就帮不了你了。还有就是因为他是编译时动态加⼊ import 语句，所以在单元测试的时候，测试框架可能会提⽰缺少引⼊，这个就要等 Vite 官⽅对它针对适配了，如果现阶段需要⽤到测试代码的童鞋则不太适合。