@done-coding/component-dev-tools

vite vue组件按需加载

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,
        }),
      ],
    }),
  ],
});

组件库组件管理

组件创建

dc-component add [name]

组件移除

dc-component remvoe

组件库配置文件

// 配置文件
// 项目根目录 /.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",
  },
}

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