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

故事从一个 MCP 工具开始

先看结果。我在 Claude 里输入了一句话：

帮我做一个员工管理页面字段有工号、姓名、手机号、部门、状态，API地址 /api/employees。支持新增编辑删除，工号和手机号必填

秒后Claude 返回了一个完整的 .vue 文件。话说回来，

不是半成品。不是脚手架，不是带着 // TODO 的骨架。老实说，

是一个能直接跑的页面——查询表单、数据表格、分页、新增弹窗、编辑弹窗、删除确认、表单校验、状态 Tag 渲染。一个不少，

我把它粘贴到项目里改了一下 import 方法，F5 刷新浏览器——页面直接跑起来了。

个页面半小时搞定。周五准时下班，

等等，这不是普通的 AI 生成代码？按理说，

你可能会说的观点是。“Claude 本来就能生成 Vue 代码啊，这有什么特别的？”

• 它不是在猜你想要什么 — 它精确知道目标组件库的每个 API。老实说，
• 它生成的代码零 TODO — 不需要人工填充任何部分。不过，
• 它理解你的后端 — API 地址、请求格式、响应映射一步到位。

一句话解释

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

You can think of it as a plugin system for AI.

普通对话 VS MCP 对话示例：

// 普通对话：你问 AI → AI 凭"记忆"回答
// MCP 对话：你问 AI → AI 查阅实时文档 + 调用专业工具 → 返回精确结果

I did this: 给 AI 配了一个专门生成 CRUD 页面的 MCP 工具。老实说，

MCP Server 安装与使用实操流程

说到步骤一，安装 MCP Server

{
"mcpServers": {
"es-plus": {
"command": "npx"。"args":
}
}
}

重启 Claude Desktop / Cursor，就可以完成配置。完事，

至于步骤二，用一句话生成页面

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

步骤三的观点是。拿到完整代码并运行

#TODO 注释数量？零个，让你无须再做任何修复工作。

MCP 背后的技术细节与痛点方法

• **痛点1**：手动写 CRUD 页面耗时且易错。 MCP 把“猜测”过程替换为“查阅文档”，保证符合最新规范。
• **痛点2**：AI 输出经常缺少关键配置，如按钮 key 或者表格分页等。按理说，MCP 自动补齐所有必需项，让代码一次性可跑。
• **痛点3**：后端接口变更导致前端失效。老实说，MCP 的工具链可以即时读取最新 API 文档。无需重新编写前端逻辑，老实说，
• **痛点4**：多行数据导致卡顿。MCP 自动切换到虚拟滚动模式，只要给一句话提示就可以丝滑体验。
• **痛点5**：不想维护复杂脚手架或模板。MCP 提供结构化配置工具，只需描述业务字段即可得到完整 .vue 文件。
• **痛点6**：多语言团队难以统一编码规范。MCP 内置常用方法与 JSON Schema 校验，使团队成员能快速上手并保持一致性。.
  • #️⃣ 在实际项目中，我只需要一条一句话描述。就能在几分钟内完成整个 CRUD 页面开发，而传统方法往往需要一天甚至更长时间。这就是效率与质量双提高的真正意义所在！🌟 如果你也遇到类似开发瓶颈，不妨试试 MCP，一次性解决繁琐编码烦恼！💡 记住在未来的软件工程中，“AI+工具链”将越来越多人使用。而 M C P 正是这场变革中的关键节点！老实说，🚀 快去尝试吧，你会惊喜于自己的生产力飞跃！

    ---

    © 
    ` });} } })，

    如何验证效果

    bash git diff --stat | grep -i vue grep -E 'ElMessage|useDialog|virtual' src/pages/Employee.vue npm run dev

    ---

    *MCP 将“AI 写代码”从粗糙实验室转化为可靠工程实践*：

    场景	没有 MCP 的传统方法	有 MCP 的方法
    开发时间	数天甚至数周	数分钟
    错误率	高	极低
    可维护性	难以统一规范	一致且可追溯
    学习曲线	长期培训需求	一句话即可上手

    如果你正面临繁琐 CRUD 开发流程或后端接口频繁变更导致前端崩溃，那么 **MCP+ES Plus UI** 已经为你准备好了全套答案。

    ---

    立即尝试

    bash npm i es-plus-ui @es-plus/mcp-server npx @es-plus/mcp-server help me generate a product management page: - fields: name,category,price,stock,status - api: /api/products - actions: create,update。delete

    ---

    链接 & 资源

    • – npm i es-plus-ui
    • – 源码仓库
    • – 快速上手
    • – npx @es-plus/cli create my-page

    大家一起迈向“AI 驱动前端”的新时代吧 🚀