# component-dev-tools

**Repository Path**: justsosu/component-dev-tools

## Basic Information

- **Project Name**: component-dev-tools
- **Description**: 组件库工具
-- vue组件按需加载解析
-- 组件结构创建于删除
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-21
- **Last Updated**: 2025-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @done-coding/component-dev-tools

## vite vue组件按需加载

```ts
import { defineConfig } from "vite";
import Components from "unplugin-vue-components/vite";
import { vCResolver } from "@done-coding/component-dev-tools";

export default defineConfig({
  plugin: [
    Components({
      resolvers: [
        vCResolver({
          checkIsSeries: (name) => name.startsWith("V"),
          getComponentName: (name) => name,
          getStylePath: ({ kebabComponentName }) =>
            `YOUR_PACKAGE_MODULE/es/styles/${kebabComponentName}/index.less`,
          componentsDir: "YOUR_PACKAGE_MODULE/es",
          debug: true,
        }),
      ],
    }),
  ],
});
```

## 组件库组件管理

### 组件创建

```bash
dc-component add [name]
```

### 组件移除

```bash
dc-component remvoe
```

### 组件库配置文件

```json5
// 配置文件
// 项目根目录 /.dc/component.json5
{
  series: "Dc",
  src: "src",
  component: {
    /**
     * @description: 组件的目录
     */
    dir: "${src}/${dir}",
    /**
     * @description: 组件的模板文件路径
     */
    templateFilePath: "./template/componentTemplate.m",
    /**
     * @description: 组件的文件名
     */
    fileName: "index.tsx",
    /**
     * @description: 组件的入口模板
     */
    entryTemplate: '\n\
export { default as ${name} } from "./${dir}";\n\
export type * from "./${dir}";',
    /**
     * @description: 组件的入口路径
     */
    entryPath: "${src}/components.ts",
  },
  type: {
    /**
     * @description: 类型的目录
     */
    dir: "${src}/types",
    /**
     * @description: 类型的模板文件路径
     */
    templateFilePath: "./template/typeTemplate.m",
    /**
     * @description: 类型的文件名
     */
    fileName: "${dir}.tsx",
    /**
     * @description: 类型的入口模板
     */
    entryTemplate: '\n\
@import "./${dir}.tsx";',
    /**
     * @description: 类型的入口路径
     */
    entryPath: "${src}/types/index.ts",
  },
  style: {
    /**
     * @description: 样式的目录
     */
    dir: "${src}/styles",
    /**
     * @description: 样式的模板文件路径
     */
    templateFilePath: "./template/styleTemplate.m",
    /**
     * @description: 样式的文件名
     */
    fileName: "${dir}.less",
    /**
     * @description: 样式的变量模板
     */
    varTemplate: "\n\
\n\
// ------------------ ${name} ------------------\n\
@${nameLowerFirst}Prefix: ~'@{prefix}-${dir}';",
    /**
     * @description: 样式的变量路径
     */
    varPath: "${src}/styles/var.less",
    /**
     * @description: 样式的入口模板
     */
    entryTemplate: '\n\
@import "./${dir}.less";',
    /**
     * @description: 样式的入口路径
     */
    entryPath: "${src}/styles/index.less",
  },
  srcExample: "src-docs",
  example: {
    /**
     * @description: 组件示例的目录
     */
    dir: "${srcExample}/${dir}",
    /**
     * @description: 组件示例的模板文件路径
     */
    templateFilePath: "./template/exampleTemplate.m",
    /**
     * @description: 组件示例的文件名
     */
    fileName: "index.tsx",
    /**
     * @description: 组件示例的入口模板
     */
    entryTemplate: '\n\
export { default as ${name} } from "./${dir}"',
    /**
     * @description: 组件示例的入口路径
     */
    entryPath: "${srcExample}/components.ts",
  },
}
```

```ts
// 模板环境变量
interface EnvData {
  series: string;
  name: string;
  full: string;
  cls: string;
  dir: string;
  rootPath: string;
  src: string;
  srcExample: string;
  nameLowerFirst: string;
  $: "$";
}
```