mcp-vue-codegen

MCP Server，根据数据库表字段 JSON 文档自动生成 Vue3 前端 + Java 后端 完整 CRUD 模块代码。

功能概览

前端生成（Vue3 + Element Plus）

| 文件 | 说明 | |------|------| | options.ts | 表单字段配置、过滤类型 | | api/*.ts | 5 个标准 CRUD 接口（fetchList / addObj / getObj / delObjs / putObj） | | index.vue | 列表页：表格、智能搜索、分页、按钮（增删改查/提交/流转/导出/打印） | | form.vue | 表单页：折叠面板、字段控件、校验规则、弹窗选择器、主从表 |

后端生成（Spring Boot + MyBatis-Plus）

| 文件 | 说明 | |------|------| | {Entity}Entity.java | 主表实体类（含 @TableId、@Dict、@Schema 等注解） | | {Entity}DetailEntity.java | 从表实体类（有从表时生成） | | {Entity}Mapper.java + .xml | MyBatis-Plus Mapper 接口及 XML | | {Entity}Service.java | Service 接口 | | {Entity}ServiceImpl.java | Service 实现（主从表级联 CRUD、工作流回调） | | {Entity}Controller.java | REST Controller（分页查询、增删改查、导出、打印） |

快速开始

1. 配置 MCP

在你的 IDE 中添加 MCP Server 配置：

Claude Code（~/.claude/settings.json 或项目下 .claude/settings.json）：

{
  "mcpServers": {
    "vue-codegen": {
      "command": "npx",
      "args": ["-y", "mcp-vue-codegen"]
    }
  }
}

Trae / VS Code（MCP 设置中添加）：

{
  "mcpServers": {
    "vue-codegen": {
      "command": "npx",
      "args": ["-y", "mcp-vue-codegen"]
    }
  }
}

2. 准备 JSON 文档

参考 example/table-schema.json 编写你的表字段描述文件。

3. 在 IDE 中调用

配置好后，直接在 AI 对话中用自然语言调用即可：

生成前端代码：

用 generate_vue_crud 工具，schemaInput 为 E:/codegen/template/table-schema.json

输出路径自动推导为 {projectRoot}/src/views/{moduleName}/{componentName}/

生成后端代码：

用 generate_java_crud 工具，schemaInput 为 E:/codegen/template/table-schema.json，projectRoot 为 E:/vue3/worsoft5.3

输出路径自动推导为 {projectRoot}/worsoft-{moduleName}/ 下的标准 Java 包结构

校验 JSON 文档：

用 validate_schema 工具，schemaInput 为 E:/codegen/template/table-schema.json

MCP Tools

validate_schema

校验 JSON 文档是否符合代码生成规范。

| 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | schemaInput | string | 是 | JSON 文件路径 或 JSON 字符串 |

generate_vue_crud

生成 Vue3 前端 CRUD 代码。

| 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | schemaInput | string | 是 | JSON 文件路径 或 JSON 字符串 | | projectRoot | string | 否 | 前端项目根目录，默认当前工作目录 | | outputDir | string | 否 | 直接指定输出目录，指定后忽略自动推导 |

generate_java_crud

生成 Java 后端 CRUD 代码。

| 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | schemaInput | string | 是 | JSON 文件路径 或 JSON 字符串 | | projectRoot | string | 否 | 后端项目根目录，默认当前工作目录 |

JSON 文档格式

完整示例见 example/table-schema.json，核心结构如下：

{
  "module": {
    "moduleName": "oa",
    "businessName": "企业证照借用",
    "entityName": "CertBorrow",
    "componentName": "CertBorrow",
    "apiBasePath": "/oa/certBorrow",
    "apiFilePath": "api/oa/CertBorrow",
    "permissionPrefix": "oa_OaCertificatesBorrow",
    "hasWorkflow": true,
    "hasExport": true,
    "hasPrint": true,
    "labelWidth": "100px"
  },
  "master": {
    "tableName": "oa_cert_borrow",
    "formSections": [
      { "name": "basic", "collapseIndex": "0", "title": "基本信息" }
    ],
    "filterTypes": { "billStateId": 30 },
    "fields": [
      {
        "columnName": "id",
        "fieldName": "id",
        "label": "单据ID",
        "dataType": "varchar(64)",
        "inputType": "hidden",
        "required": false,
        "showInTable": false,
        "alwaysHide": true,
        "smartSearch": false,
        "tableWidth": "0",
        "isPrimaryKey": true
      }
    ]
  },
  "detail": {
    "tableName": "oa_cert_borrow_detail",
    "detailTitle": "企业证照借用从表",
    "detailFkField": "mainId",
    "detailListName": "details",
    "fields": []
  }
}

关键字段说明

| 字段属性 | 作用 | |---------|------| | hasWorkflow | 控制流程相关按钮（提交/流转）和后端 processCompleted 回调 | | hasExport / hasPrint | 控制导出/打印按钮及后端对应接口 | | showInTable + alwaysHide | 决定表格列是否显示 | | showInForm + formSection + formRow + formColSpan | 决定表单字段布局 | | inputType | 控件类型：input / date / textarea / file / select / userRef / personRef | | smartSearch | 是否纳入智能搜索范围 | | dictCode + needFormatter | 字典格式化（前端 formatter + 后端 @Dict 注解） | | refConfig | 弹窗选择器配置（组件、字段映射） | | editableInTable | 从表行内编辑（select / date） | | required | 前端校验规则 | | isPrimaryKey / isForeignKey / isSystemField | 后端实体类字段类型推导和过滤 |

项目结构

mcp-vue-codegen/
├── src/
│   ├── index.ts                          # MCP Server 入口：注册 3 个 Tool，启动 stdio 通信
│   ├── types/
│   │   └── schema.ts                     # TypeScript 类型定义（TableSchema 完整接口）
│   ├── tools/
│   │   ├── validate.ts                   # Zod Schema 定义 + JSON 校验/解析函数
│   │   └── generate.ts                   # 前端生成协调器（调用 4 个 generator → 写入文件）
│   ├── generators/
│   │   ├── options.ts                    # options.ts 生成器
│   │   ├── api.ts                        # api/*.ts 生成器
│   │   ├── index-vue.ts                  # index.vue 生成器
│   │   ├── form-vue.ts                   # form.vue 生成器
│   │   └── backend.ts                    # 后端生成协调器（调用 4 个 backend 模板 → 写入文件）
│   └── templates/
│       ├── options.tpl.ts                # 模板：options.ts 代码字符串生成
│       ├── api.tpl.ts                    # 模板：api/*.ts 代码字符串生成
│       ├── index-vue.tpl.ts              # 模板：index.vue 代码字符串生成
│       ├── form-vue.tpl.ts               # 模板：form.vue 代码字符串生成
│       └── backend/
│           ├── entity.tpl.ts             # 模板：Entity Java 代码生成
│           ├── mapper.tpl.ts             # 模板：Mapper 接口 + XML 代码生成
│           ├── service.tpl.ts            # 模板：Service 接口 + ServiceImpl 代码生成
│           └── controller.tpl.ts         # 模板：Controller 代码生成
├── example/
│   └── table-schema.json                 # 示例 JSON 文档
├── package.json
├── tsconfig.json
├── LICENSE
└── README.md

模块说明

| 模块 | 职责 | |------|------| | index.ts | MCP Server 入口，注册 3 个 Tool（validate_schema / generate_vue_crud / generate_java_crud），通过 stdio 与 IDE 通信 | | types/schema.ts | 定义 TableSchema 完整 TypeScript 接口，包括 Module、Master、Detail、FieldDef、RefConfig 等 | | tools/validate.ts | 使用 Zod 定义 JSON 文档校验规则，提供 validateSchema()（校验）和 parseSchema()（解析）两个函数 | | tools/generate.ts | 前端生成协调器，依次调用 4 个 generator 生成 options.ts / api / index.vue / form.vue 并写入磁盘 | | generators/backend.ts | 后端生成协调器，调用 entity / mapper / service / controller 模板生成 11 个 Java 文件并写入磁盘 | | templates/*.tpl.ts | 纯函数模板，接收解析后的 schema 对象，返回生成的代码字符串。无副作用，不操作文件系统 |

运行流程

IDE 启动 → npx mcp-vue-codegen → Node.js 进程启动 → stdio 通信等待调用
                                         │
                                    注册 3 个 Tool
                                         │
              ┌──────────────────────────┼──────────────────────────┐
              ▼                          ▼                          ▼
      validate_schema           generate_vue_crud          generate_java_crud
              │                          │                          │
              ▼                          ▼                          ▼
     resolveSchemaJson()        resolveSchemaJson()        resolveSchemaJson()
     (文件路径→读文件)           (文件路径→读文件)           (文件路径→读文件)
              │                          │                          │
              ▼                          ▼                          ▼
     Zod 校验 JSON              parseSchema() 解析         parseSchema() 解析
              │                          │                          │
              ▼                          ▼                          ▼
     返回校验结果              4 个前端 generator          4 个后端 template
                               生成代码字符串              生成代码字符串
                                         │                          │
                                         ▼                          ▼
                               fs.writeFileSync()          fs.writeFileSync()
                               写入 4 个前端文件           写入 11 个 Java 文件
                                         │                          │
                                         ▼                          ▼
                                返回文件列表+行数           返回文件列表+行数

环境要求

• Node.js >= 18

License

MIT (c) anshu