@vavt/component-resolver

自动化组件按需导入的工具。

它可以：

• 支持自定义组件名前缀，默认为 Vl。
• 灵活配置样式导入方式（CSS、SCSS 或不导入）。
• 支持自定义组件路径和样式路径解析器。
• 提供组件名转换函数，支持自定义命名规则。
• 与 unplugin-vue-components 等工具无缝集成。

⭐️ 特性

• 灵活的样式导入：支持 CSS、SCSS，可通过函数自定义导入决策。
• 自定义解析器：提供 resolveComponentPath 和 resolveStylePath 自定义导入路径。
• 名称转换：支持组件名和路径名的自定义转换。
• 易于集成：与 unplugin-vue-components 等工具配合使用。
• 灵活配置：完整的配置选项，适应不同项目需求。

📦 安装

npm install -D @vavt/component-resolver

🛠️ 使用方法

与 Vue + Vite 集成

1. 安装 unplugin-vue-components：

npm install -D unplugin-vue-components

2. 在 vite.config.ts 中配置：

import Components from 'unplugin-vue-components/vite';
import { componentsResolver } from '@vavt/component-resolver';

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        componentsResolver({
          prefix: 'Vl', // 组件名前缀
          libraryName: '@vavt/vue-ui', // 组件库名称
          importStyle: 'css',
        }),
      ],
    }),
  ],
});

3. 在 tsconfig.json 中添加类型：

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

配置完成后可在模板中直接使用组件：

<template>
  <VlCard>卡片</VlCard>
</template>

<script setup lang="js">
// 无需手动导入
</script>

🧩 配置项

| 参数 | 类型 | 默认值 | 说明 | | ------------------------ | ---------------------------------------- | ------------- | ------------------------ | | prefix | string | 'Vl' | 组件名前缀 | | importStyle | boolean \| 'css' \| 'scss' \| function | 'css' | 是否导入样式 | | libraryName | string | - | 库名，用于构建导入路径 | | componentDir | string | 'dist/es' | ESM 组件入口目录 | | cssDir | string | 'dist/css' | CSS 样式目录 | | scssDir | string | 'dist/scss' | SCSS 样式目录 | | resolveComponentPath | function | - | 自定义组件导入路径解析器 | | resolveStylePath | function | - | 自定义样式导入路径解析器 | | transformComponentName | function | - | 组件名转换函数 | | toPathName | function | toKebabCase | 路径名转换函数 |

更多细节请查看源码 index.ts。