使用MCP框架：一句指令快速构建CRUD功能页面
通过MCP协议与AI结合，只需简单描述即可生成完整可运行的CRUD页面，大幅提升开发效率。下面将详细介绍具体实现方法。
我用 MCP + 一句话生成了完整的 CRUD 页面
故事从一个 MCP 工具开始
让我们先看实际效果。在Claude中输入以下指令：
帮我做一个员工管理页面，字段有工号、姓名、手机号、部门（下拉选技术部/产品部/设计部）、
状态（在职/离职/试用期，用Tag颜色区分），API地址 /api/employees，
支持新增编辑删除，工号和手机号必填
短短3秒后，Claude就返回了一个完整的.vue文件。
这绝非半成品或脚手架，也不是带有大量TODO注释的骨架代码，而是一个功能完备的页面：包含查询表单、数据表格、分页组件、新增编辑弹窗、删除确认、表单校验以及状态Tag渲染等完整功能。
将代码粘贴到项目中，仅需修改import路径，刷新浏览器后页面即可正常运行。原本需要半天的工作量，现在仅需半小时就能完成6个页面。
等等，这不是普通的 AI 生成代码
有人可能会质疑："Claude本来就能生成Vue代码，这有什么特别？"
其独特之处在于：
- 精准理解需求 - 准确掌握目标组件库的每个API
- 完整可运行 - 无需人工补充任何部分
- 后端适配 - 自动处理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 | 查看 |
每个页面只需：
- 查看原型并描述字段和操作
- AI调用MCP工具生成代码
- 粘贴到项目中
- 修改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代码，不再是辅助工具而是生产力主体。现在就开始体验这项技术革新吧。
