vue-crud-form-kit

Vue3 CRUD Form Kit - 基于配置的Vue3 CRUD页面代码生成工具

简介

vue-crud-form-kit 是一个面向 Vue3 + TypeScript + Element Plus 开发者的 CLI 代码生成工具，通过简单的交互配置或 JSON 预设快速生成包含搜索栏、数据表格、分页、操作按钮的完整列表页面代码，大幅减少重复编写 CRUD 页面的工作量。

核心特性

• 交互式配置：通过 Inquirer 提供友好的命令行交互
• 预设模板：内置常用页面模板，开箱即用
• 多模板支持：内置模板 + 外部模板路径加载
• TypeScript：全项目 TypeScript 编写，类型安全
• 跨平台：支持 Windows、macOS、Linux 三大系统
• 可扩展：支持自定义模板和配置

技术栈

• Node.js：>= 14.0.0
• TypeScript：5.3+
• CLI 框架：Commander + [email protected]
• 模板引擎：EJS
• 样式：Element Plus + SCSS

安装

# 全局安装
npm install -g vue-crud-form-kit

# 或使用 pnpm
pnpm add -g vue-crud-form-kit

# 或使用 yarn
yarn global add vue-crud-form-kit

快速开始

使用交互式命令生成

# 启动交互式生成
vue-crud generate
# 或简写
vue-crud g

使用命令参数快速生成

# 生成用户列表页
vue-crud g --name UserList --module user --output ./src/views

# 生成列表页（不包含搜索栏）
vue-crud g --name UserList --no-search

# 生成列表页（不生成API文件）
vue-crud g --name UserList --no-api

使用预设模板

# 使用内置列表页预设
vue-crud g --preset page-list --name UserList

命令参数

generate/g

| 参数 | 简写 | 说明 | 默认值 | |------|------|------|--------| | --name | -n | 页面名称 | - | | --type | -t | 页面类型（list/form/detail） | list | | --module | -m | 模块名称（用于API路径） | - | | --output | -o | 页面输出目录 | ./src/views | | --api-output | -a | API文件输出目录 | ./src/api | | --preset | -p | 使用预设模板 | - | | --external | -e | 使用外部模板路径 | - | | --no-api | - | 不生成API文件 | false | | --no-search | - | 不包含搜索栏 | false | | --no-table | - | 不包含数据表格 | false | | --no-pagination | - | 不包含分页 | false | | --no-actions | - | 不包含操作按钮 | false |

template

# 列出所有可用模板
vue-crud template --list

项目结构

vue-crud-form-kit/
├── src/
│   ├── cli/                    # CLI层
│   │   ├── index.ts            # 导出
│   │   ├── commands.ts         # 命令定义
│   │   └── inquirer.ts         # 交互配置
│   │
│   ├── core/                   # 核心引擎
│   │   ├── generator.ts        # 生成器
│   │   ├── template-engine.ts  # 模板引擎
│   │   └── file-writer.ts      # 文件写入器
│   │
│   ├── data/                   # 数据层
│   │   ├── schema-loader.ts    # Schema加载器
│   │   ├── data-transformer.ts # 数据转换器
│   │   └── presets/            # 预设配置
│   │
│   ├── templates/              # 渲染层
│   │   └── vue3-element-plus/  # Vue3 + Element Plus模板
│   │       ├── page/           # 页面模板
│   │       ├── api/            # API模板
│   │       └── partials/       # 模板片段
│   │
│   ├── output/                 # 输出层
│   │   ├── formatter.ts        # 代码格式化
│   │   └── validator.ts        # 代码验证
│   │
│   ├── config/                 # 配置
│   │   └── index.ts            # 配置管理
│   │
│   └── utils/                  # 工具函数
│       ├── constants.ts        # 常量
│       ├── path-helper.ts      # 路径处理
│       └── logger.ts           # 日志工具
│
├── test/                       # 测试
│   └── unit/                   # 单元测试
│
├── bin/                        # 可执行文件
│   └── cli.js
│
├── package.json
├── tsconfig.json
├── tsup.config.ts
└── README.md

开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 运行测试
pnpm test

# 代码检查
pnpm lint

# 代码格式化
pnpm format

生成示例

执行以下命令生成用户列表页面：

vue-crud g --name UserList --module user

生成的文件结构：

src/
├── views/
│   └── userList.vue           # 列表页面
└── api/
    └── userList.ts            # API接口

生成的页面包含：

• 搜索栏（支持输入框、下拉选择、日期选择等）
• 数据表格（自动生成列）
• 分页组件
• 操作按钮（新增、编辑、删除）

自定义模板

使用外部模板

vue-crud g -e /path/to/custom/templates

模板开发规范

模板使用 EJS 语法，可用变量：

| 变量 | 说明 | |------|------| | pageName | 页面名称 | | pageClassName | 页面类名（PascalCase） | | description | 页面描述 | | moduleName | 模块名称 | | routePath | 路由路径 | | hasSearchBar | 是否包含搜索栏 | | hasDataTable | 是否包含数据表格 | | hasPagination | 是否包含分页 | | hasActionButtons | 是否包含操作按钮 | | fields | 字段配置 | | searchableFields | 可搜索字段 | | actions | 操作按钮配置 | | imports | 需要导入的组件 |

License

MIT