QCF (Quick Create File)

一个基于 Plop 的前端项目代码生成工具，支持快速创建 Vue3 和 React 项目的模板文件。

功能特性

Vue3 支持

TypeScript 支持: Vue3 模板（component、page、pageComp）会自动检测项目是否使用 TypeScript，并生成对应的模板。检测优先级：

1. 环境变量 QCF_USE_TS=true/false（最高优先级）
2. 检查 tsconfig.json 是否存在
3. 检查 package.json 中是否包含 typescript 依赖

老项目无需任何改动，默认使用 JavaScript 模板；新项目如果配置了 TypeScript，会自动使用 TypeScript 模板。

1. component - 创建通用组件

   • 生成位置: src/components/
   • 生成文件: .vue + .less
   • 支持路径嵌套（如: user/profile）
   • 自动支持 TypeScript（<script setup lang="ts">）

2. page - 创建页面

   • 生成位置: src/views/
   • 生成文件: .vue + .less
   • 支持路径嵌套
   • 禁止使用 components 作为子路径名
   • 自动支持 TypeScript（<script setup lang="ts">）

3. pageComp - 创建页面内组件

   • 生成位置: src/views/{页面名}/components/
   • 生成文件: index.vue + index.less
   • 自动检测现有页面列表供选择
   • 自动支持 TypeScript（<script setup lang="ts">）

4. icon - 创建 SVG 图标组件

   • 生成位置: src/components/icons/
   • 生成文件: .vue
   • 支持 props: width, height, fill, stroke, color, spin, rtl

5. service - 创建 API 服务（JavaScript）

   • 生成位置: src/api/
   • 生成文件: {name}-service.js
   • 基于 BaseService 类

6. tService - 创建 API 服务（TypeScript）

   • 生成位置: src/api/
   • 生成文件: {name}-service.ts
   • 基于 BaseService 类

React 支持

1. reactComponent - 创建 React 组件

   • 生成位置: src/components/
   • 生成文件: .tsx + .module.less
   • 支持路径嵌套

2. reactPage - 创建 React 页面

   • 生成位置: src/pages/
   • 生成文件: .tsx + .module.less
   • 支持路径嵌套
   • 禁止使用 components 作为子路径名

3. reactPageComp - 创建 React 页面内组件

   • 生成位置: src/pages/{页面名}/components/
   • 生成文件: index.tsx + index.module.less
   • 自动检测现有页面列表供选择

安装使用

安装

npm install qcf --save-dev
# 或
yarn add qcf -D

配置

在项目根目录创建 plopfile.js:

module.exports = async plop => {
  await plop.load('qcf')
}

使用

运行 Plop 命令：

npx plop

然后根据提示选择要生成的模板类型，输入组件/页面名称即可。

TypeScript 支持

Vue3 模板会自动检测项目是否使用 TypeScript：

自动检测（推荐）：

• 如果项目根目录存在 tsconfig.json，自动使用 TypeScript 模板
• 如果 package.json 中包含 typescript 依赖，自动使用 TypeScript 模板

手动控制：

# 强制使用 TypeScript 模板
QCF_USE_TS=true npx plop

# 强制使用 JavaScript 模板
QCF_USE_TS=false npx plop

或者在 plopfile.js 中设置：

process.env.QCF_USE_TS = 'true'; // 或 'false'
module.exports = async plop => {
  await plop.load('qcf')
}

命名规则

• 输入支持路径嵌套，如: user/profile 或 admin/settings
• 自动转换为 kebab-case 作为文件名
• 自动转换为 PascalCase 作为组件名
• 自动转换为 camelCase 作为变量名

项目结构

qcf/
├── dist/                  # 构建输出
├── example/               # 使用示例
└── package.json

技术栈

• Plop - 代码生成工具
• Handlebars - 模板引擎
• lodash.kebabcase - 命名转换
• lodash.camelcase - 命名转换
• lodash.upperfirst - 命名转换

版本

当前版本: v0.2.0