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 })]
    })
  ]
}

• 这里以 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 官方对它针对适配了，如果现阶段需要用到测试代码的童鞋则不太适合。