@wemt/vue-auto-components

一个专为 Vue 3 + Vite 项目设计的组件自动导入插件，基于 unplugin-vue-components 封装，提供更简便的配置和更强大的自定义规则支持。

✨ 功能特性

• 🚀 零配置启动: 默认自动扫描 src/components 目录，无需繁琐配置
• 🧩 智能按需加载: 仅在模板中使用的组件会被自动导入和注册
• ⚙️ 灵活的规则系统: 支持正则表达式匹配和路径模板替换，轻松适配各种目录结构
• 📝 TypeScript 支持: 自动生成类型声明文件，提供完美的 IDE 智能提示
• 🔌 兼容性强: 继承 unplugin-vue-components 的所有能力，支持各种 UI 库解析器

📦 安装

npm install @wemt/vue-auto-components -D
# 或
yarn add @wemt/vue-auto-components -D
# 或
pnpm add @wemt/vue-auto-components -D

🚀 快速开始

在 vite.config.ts 中配置插件：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vac from "@wemt/vue-auto-components";

export default defineConfig({
  plugins: [
    vue(),
    vac({
      // 是否自动扫描 src/components 目录，默认为 true
      autoscan: true,

      // 生成 TypeScript 声明文件的路径
      dts: "src/types/auto-components.d.ts",

      // 额外需要扫描的目录列表
      dirs: ["src/ui", "src/layouts"],

      // 自定义规则配置
      // 通过正则匹配规则，将组件名映射到特定的文件路径
      // Key (键): 正则表达式字符串，用于匹配组件名（PascalCase）
      // Value (值): 目标文件路径模板，支持 $1, $2 等占位符
      rules: {
        // 示例：将 w-list 映射到 @/components/widgets/w-list/w-list.vue
        "^w-(.*)": "@/components/widgets/w-$1/w-$1.vue",

        // 示例：将 u-button 映射到 @/components/ui/u-button/u-button.vue
        "^u-(.*)": "@/components/ui/u-$1/u-$1.vue",
      },

      // 传递给 unplugin-vue-components 的其他配置
    }),
  ],
});

模板使用示例

配置完成后，你可以在模板中直接使用组件，无需手动导入：

<template>
  <div>
    <!-- 自动导入 src/components/HelloWorld.vue -->
    <HelloWorld />

    <!-- 自动导入 src/ui/Button.vue (根据 dirs 配置) -->
    <w-button>Click me</w-button>

    <!-- 自动导入 @/components/widgets/w-list/w-list.vue (根据 rules 配置) -->
    <w-list />
  </div>
</template>

集成 UI 库

你可以使用 resolvers 选项来集成第三方 UI 库（如 Element Plus, Ant Design Vue 等）：

import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

{
  resolvers: [ElementPlusResolver()],
};

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT

👨‍💻 作者

Mutaoinc & Wemt Team

如果这个工具对你有帮助，请给个 ⭐ Star 支持一下！