使用MCP框架：一句指令快速构建CRUD功能页面

通过MCP协议与AI结合，只需简单描述即可生成完整可运行的CRUD页面，大幅提升开发效率。下面将详细介绍具体实现方法。

我用 MCP + 一句话生成了完整的 CRUD 页面

故事从一个 MCP 工具开始

让我们先看实际效果。在Claude中输入以下指令：

帮我做一个员工管理页面，字段有工号、姓名、手机号、部门（下拉选技术部/产品部/设计部）、
状态（在职/离职/试用期，用Tag颜色区分），API地址 /api/employees，
支持新增编辑删除，工号和手机号必填

短短3秒后，Claude就返回了一个完整的.vue文件。

这绝非半成品或脚手架，也不是带有大量TODO注释的骨架代码，而是一个功能完备的页面：包含查询表单、数据表格、分页组件、新增编辑弹窗、删除确认、表单校验以及状态Tag渲染等完整功能。

将代码粘贴到项目中，仅需修改import路径，刷新浏览器后页面即可正常运行。原本需要半天的工作量，现在仅需半小时就能完成6个页面。

---

等等，这不是普通的 AI 生成代码

有人可能会质疑："Claude本来就能生成Vue代码，这有什么特别？"

其独特之处在于：

1. 精准理解需求 - 准确掌握目标组件库的每个API
2. 完整可运行 - 无需人工补充任何部分
3. 后端适配 - 自动处理API地址、请求格式和响应映射

这一切都得益于MCP（Model Context Protocol）协议。

---

MCP 是什么？3 句话解释

MCP是Anthropic提出的协议，使AI模型能够调用外部工具。

简单理解就是：为AI安装插件系统。

普通对话：你问 AI → AI 凭"记忆"回答（可能过时、可能幻觉）
MCP 对话：你问 AI → AI 查阅实时文档 + 调用专业工具 → 返回精确结果

本案例中，我们为AI配备了专门生成CRUD页面的MCP工具。

---

实操：从安装到生成第一个页面

第 1 步：安装 MCP Server（30 秒）

在claude_desktop_config.json中添加配置：

{
  "mcpServers": {
    "es-plus": {
      "command": "npx",
      "args": ["-y", "@es-plus/[email protected]"]
    }
  }
}

重启Claude Desktop或Cursor即可完成安装。

第 2 步：用一句话生成页面

输入以下指令：

用 generate_crud_from_config 工具，帮我生成一个员工管理页面：
- 字段：工号(employeeNo)、姓名(name)、手机号(phone)、部门(deptId,下拉)、状态(status,下拉)
- API: /api/employees
- 操作：新增、编辑、删除
- 工号和手机号必填
- 状态用 Tag 颜色区分

第 3 步：获取完整代码

AI将调用MCP工具，返回可直接运行的完整代码：

这段代码没有任何TODO注释，完全可以直接运行。

---

这背后发生了什么？

当AI调用generate_crud_from_config工具时，MCP Server执行以下流程：

┌─────────────────────────────────────────────────────┐
│  你的一句话                                           │
│  "员工管理，字段有工号/姓名/手机号/部门/状态..."        │
└───────────────────┬─────────────────────────────────┘
                    │
                    ▼
┌─────────────────────────────────────────────────────┐
│  AI 理解意图 → 构造 StructuredCrudConfig JSON          │
│  （字段定义、表单类型、校验规则、API地址）              │
└───────────────────┬─────────────────────────────────┘
                    │
                    ▼
┌─────────────────────────────────────────────────────┐
│  MCP Tool: generate_crud_from_config                 │
│  ├── Zod Schema 校验（字段合法性）                    │
│  ├── 代码生成引擎（es-plus 最佳实践内置）             │
│  └── 零 TODO 模板输出                                │
└───────────────────┬─────────────────────────────────┘
                    │
                    ▼
┌─────────────────────────────────────────────────────┐
│  完整 .vue 文件                                       │
│  ├── TypeScript 类型定义                              │
│  ├── 查询表单 + 自动联动                              │
│  ├── 数据表格 + 分页                                  │
│  ├── 新增/编辑弹窗 + 表单校验                         │
│  └── 删除确认                                        │
└─────────────────────────────────────────────────────┘

关键在于：AI不是猜测es-plus的代码写法，而是通过MCP协议实时获取：

• esplus://types - 完整的TypeScript类型定义
• esplus://conventions - 编码规范和最佳实践
• esplus://schemas/table-options - JSON Schema校验规则

这确保了AI生成的代码100%符合组件库规范，不会出现看似正确但无法运行的情况。

---

跟裸写 AI 提示词有什么区别？

我们进行了对比实验：

方式 A：直接问 Claude（无 MCP）

帮我用 es-plus-ui 写一个员工管理 CRUD 页面

结果发现多处问题：

• 重置按钮key错误（应为"rest"而非"reset"）
• 缺失configTableOut字段映射
• 弹窗使用了v-model而非useDialog
• 查询按钮缺少triggerEvent:true配置
• TypeScript类型定义不全

运行结果：无法直接运行，需人工修改5处错误。

方式 B：用 MCP Server

相同指令下：

• 所有按钮key正确
• 自动配置configTableOut
• 使用useDialog实现弹窗
• 自动添加triggerEvent:true
• 完整的TypeScript类型

运行结果：直接运行，无需修改。

本质区别：MCP让AI从"凭记忆写代码"转变为"查阅最新文档写代码"。

---

再来一个真实场景：万行数据虚拟表格

当产品提出"页面可能包含数万条数据，需确保不卡顿"时，只需添加说明：

这个页面数据量大，用虚拟滚动模式，固定行高 48px，表格高度 500px

AI会自动调整options配置：

const options = {
  border: true,
  virtual: true,        // ← 新增虚拟滚动配置
  rowHeight: 48,
  tabHeight: 500,
  heightType: 'height' as const,
  apiParams: { url: '/api/employees' },
  rowkey: 'id',
}

底层自动切换至el-table-v2虚拟滚动引擎，即使10万行数据也能流畅运行。

AI之所以知道如何配置这些参数，是因为MCP Server的esplus://conventions资源中明确说明：

## Virtual Scrolling (10k+ rows)
tableOptions: { virtual: true, rowHeight: 48, tabHeight: 500, heightType: 'height' }

AI不需要猜测，而是直接获取正确答案。

---

批量生成：6 个页面，30 分钟

面对6张原型图时：

页面	字段数	操作
员工管理	8	增删改查
部门管理	5	增删改
考勤记录	10	查看、导出
请假审批	7	查看、审批
薪资管理	12	查看、导出
系统日志	6	查看

每个页面只需：

1. 查看原型并描述字段和操作
2. AI调用MCP工具生成代码
3. 粘贴到项目中
4. 修改API地址

平均每个页面耗时5分钟，6个页面仅需30分钟即可完成。

传统方式至少需要一整天的工作量。

---

你也可以 5 分钟复现

前置条件

• 支持MCP的AI工具（如Claude Desktop/Cursor）
• Node.js 18+环境

具体步骤

1. 配置 MCP Server

{
  "mcpServers": {
    "es-plus": {
      "command": "npx",
      "args": ["-y", "@es-plus/mcp-server"]
    }
  }
}

2. 安装 es-plus-ui

npm install es-plus-ui element-plus

3. 开始对话

尝试生成商品管理页面：

帮我生成一个商品管理页面：
- 字段：商品名称、分类（电子/服装/食品）、价格、库存、状态（上架/下架）
- API: /api/products
- 支持新增编辑删除
- 价格必填，库存显示为数字
- 状态用 Tag 颜色区分

4. 粘贴代码并运行

整个过程简单快捷。

---

MCP Server 还能做什么？

除了生成CRUD页面，@es-plus/mcp-server还提供以下功能：

工具	用途	场景
generate_crud_page	自然语言 → CRUD 页面	快速原型
generate_crud_from_config	结构化配置 → 生产代码	精确控制
validate_config	校验配置 JSON	防错
get_component_api	获取组件 API 文档	AI 理解组件用法
list_form_types	列出所有表单类型	AI 选择正确的 formtype
scaffold_page	最小脚手架	空白起步

还包含5种Resource（AI可查阅的文档）：

• esplus://types - TypeScript类型定义
• esplus://conventions - 最佳实践和避坑指南
• esplus://schemas/{name} - JSON Schema校验规则
• esplus://examples - 内置示例
• esplus://crud-page-schema - EsCrudPage模式文档

AI实际上是在进行"开卷考试"。

---

为什么不用 ChatGPT / Copilot 也能做？

虽然它们也能生成CRUD代码，但存在显著差异：

维度	普通 AI	AI + MCP
知识来源	训练数据（可能过时）	实时获取最新文档
准确率	~60%（需要人工修）	~95%（几乎直接跑）
规范性	不确定（每次可能不同）	确定（通过 Schema 校验）
学习成本	AI 需要大量 prompt 引导	一句话就够
可复现性	同样 prompt 可能不同结果	相同配置 = 相同输出

MCP的本质：用"确定性工具"替代"AI的经验判断"。

---

技术架构（给想深入的同学）

@es-plus/mcp-server          ← MCP 协议层（stdio transport）
       │
       ├── Tools              ← AI 可调用的函数
       ├── Resources          ← AI 可查阅的文档
       └── Prompts            ← 预置的 system prompt
               │
               ▼
@es-plus/shared              ← 核心引擎（无 IO，纯逻辑）
       │
       ├── crud-engine.ts     ← 自然语言解析
       ├── structured-generator.ts  ← 结构化代码生成
       ├── schema-validator.ts      ← AJV 校验
       └── schemas/           ← JSON Schema 定义
               │
               ▼
es-plus-ui                   ← Vue 3 组件库（运行时）
       │
       ├── EsTable            ← 配置化表格（含虚拟滚动）
       ├── EsForm             ← 配置化表单
       ├── useDialog          ← 编程式弹窗
       └── EsCrudPage         ← 一键 CRUD 组件

完整流程：人类意图 → AI理解 → MCP工具验证 → 代码生成 → 零TODO输出

---

写在最后

MCP协议的出现标志着AI已能直接生成生产可用的CRUD代码，不再是辅助工具而是生产力主体。现在就开始体验这项技术革新吧。