[Vite插件] unplugin-vue-components 自动引入组件

unplugin-vue-components插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）；作者是Vite生态圈大名鼎鼎的Anthony Fu

使用此插件后，不需要手动编写import { Button } from 'ant-design-vue'这样的代码了，插件会自动识别template中使用的自定义组件并自动注册。

一、安装插件

pnpm add unplugin-vue-components -D

二、vite.config.js中配置插件

我的项目使用的组件库是ant-design-vue，所以下述配置是针对ant-desigin-vue的，

其他组件库的配置可以参考unplugin-vue-components

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import {
  AntDesignVueResolver,
} from 'unplugin-vue-components/resolvers'

export default defineConfig({
    plugins: [
        // 自动引入组件
        Components({
          resolvers: [
            AntDesignVueResolver({
              // 参数配置可参考：https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/antdv.ts
              // 自动引入 ant-design/icons-vue中的图标，需要安装@ant-design/icons-vue
              resolveIcons: true,
            }),
          ],
        }),
  ],
})

三、tsconfig.json中配置

配置完成后，运行代码，会在项目根目录自动生成一个components.d.ts文件;

需要在tsconfig.json的includes配置中加入此文件

// tsconifg.json
{
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "./auto-imports.d.ts",
        "./components.d.ts"
      ]
}

配置完成后，antd组件和项目中src/components目录(可以通过dirs配置项修改目录)下的组件都可以直接使用，无需写import语句了：