@vavt/vite-plugin-generate-global-types

生成 volar 能识别的全局类型

配置选项

| 属性名 | 类型 | 默认值 | 说明 | | -------------- | ------ | ----------------------- | ------------------------------------------------------------------------ | | prefix | string | Vl | 组件前缀，比如： VlButton | | libName | string | @vavt/lib | 组件库名称，比如：@vavt/lib | | componentsPath | string | components/*/index.ts | 组件的路径，例：path.resolve(__dirname, '../../components/*/index.ts') | | outputPath | string | dist/global.d.ts | 生成的文件路径，例：path.resolve(__dirname, '../../dist/global.d.ts') |

支持的目录结构

组件文件夹命名

插件支持两种组件文件夹命名方式：

1. 横线分隔（kebab-case）：如 button、button-group、input-number
2. 大驼峰（PascalCase）：如 Button、ButtonGroup、InputNumber

两种命名方式都会被转换为前缀加大驼峰的组件名称。

示例：

components/
├── button/              -> VlButton
│   └── index.ts
├── ButtonGroup/         -> VlButtonGroup
│   └── index.ts
├── input-number/        -> VlInputNumber
│   └── index.ts
├── DatePicker/          -> VlDatePicker
│   └── index.ts

库目录结构

支持的库目录结构：

dist/
├── types/
│   ├── button/
│   │   ├── index.d.ts
│   ├── input/
│   │   ├── index.d.ts
├── global.d.ts

使用

• 安装

  yarn add @vavt/vite-plugin-generate-global-types -D

• 配置

  vite.config.ts

  import { defineConfig } from 'vite';
  import { generateGlobalTypes } from '@vavt/vite-plugin-generate-global-types';
  import { resolve } from 'path';
  
  export default defineConfig({
    plugins: [
      generateGlobalTypes({
        prefix: 'Vl',
        libName: '@vavt/lib',
        componentsPath: resolve(__dirname, './src/components/*/index.ts'),
        outputPath: resolve(__dirname, './dist/global.d.ts'),
      }),
    ],
  });

• TypeScript 配置

  tsconfig.json

  {
    "compilerOptions": {
      "types": ["@vavt/lib/dist/global.d.ts"]
    }
  }

生成的类型文件示例

declare module 'vue' {
  // GlobalComponents for Volar
  export interface GlobalComponents {
    VlButton: typeof import('@vavt/lib')['VlButton'];
    VlButtonGroup: typeof import('@vavt/lib')['VlButtonGroup'];
    VlInput: typeof import('@vavt/lib')['VlInput'];
    VlInputNumber: typeof import('@vavt/lib')['VlInputNumber'];
  }
}

export {};

功能特点

• 自动扫描组件目录，生成全局类型定义
• 支持 Volar 自动补全和类型提示
• 支持横线分隔和大驼峰两种文件夹命名
• 自动转换为统一的大驼峰组件名
• 在 Vite 构建完成后自动生成类型文件