自动按需引入组件

开发过程中经常会使用公共组件，若每个组件都手动引入非常浪费时间，且会增加代码量。

这里通过unplugin-vue-components来实现组件的自动按需引入

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目录下的组件，无需引入，如下：

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

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