vite自动引入组件-unplugin-vue-components

unplugin-vue-components是一款功能十分强大的插件，旨在简化组件的自动导入和使用，可以帮助我们在Vue项目中自动导入并注册我们使用的任何Vue组件，从而提高开发效率。
开始：

pnpm i unplugin-vue-components -D

在vite.config.ts中配置

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      Components({
        // 自动加载组件的目录配置,默认的为 'src/components'
        dirs: ["src/components"],
        // 组件的有效文件扩展名
        extensions: ["vue"],
        // 配置文件生成位置
        dts: "src/components.d.ts"
      })
    ]
  };
});

我们首先指定需要自动引入文件的路径，例如：src/components目录下

然后指定组件的有效扩展名，这里只识别.vue的文件

最后在src目录下会自动生成components.d.ts文件，该文件内部列出了src/components目录下可自动引入的组件列表
到这里就配好了，我们可以在页面直接使用组件，无需引入，如下：

// 页面直接使用HelloWorld组件
<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

// HelloWorld.vue
<template>
  <div>
    <div>这是组件：</div>
    <img :src="tom" />
  </div>
</template>

<script setup lang="ts">
import tom from "@assets/img/tom.jpg";
</script>

<style lang="scss" scoped></style>

页面效果：

注意：
对于一些Web Worker 脚本这样的组件，可能会自动引入失效，需要手动引入。