Trae可通过四种方式快速生成前端模拟数据：一、自然语言指令转JSON；二、解析OpenAPI自动补全响应；三、调用内置模板库；四、结合代码上下文实时生成匹配数据。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在前端开发过程中需要快速生成模拟数据用于界面调试，Trae 可以借助其集成的 AI 能力自动生成结构化、符合业务语义的 mock 数据。以下是实现该目标的具体方法：
一、通过 Trae 的自然语言指令生成 JSON mock 数据
此方法利用 Trae 的大模型理解能力，将开发者的中文描述直接转化为标准 JSON 格式数据，无需编写 schema 或模板。
1、在 Trae 主界面顶部输入框中输入类似“生成 5 条用户信息，包含 id（数字）、name（中文名）、email（邮箱格式）、is_active（布尔值）、created_at（ISO 时间字符串）”。
2、按下回车或点击“生成”按钮，Trae 将输出格式正确、字段类型合规的 JSON 数组。
立即学习“前端免费学习笔记（深入）”；
3、点击结果区域右上角的复制为 JSON按钮，将内容粘贴至前端代码中的 mock 数据变量或本地 API 模拟服务中。
二、基于已有接口定义（OpenAPI/Swagger）自动补全 mock 响应
当项目已提供 OpenAPI 3.0 规范文件时，Trae 可解析路径、参数与响应 schema，并为每个 endpoint 自动生成符合约束的示例数据。
1、在 Trae 左侧导航栏点击“API 管理”，选择“导入 OpenAPI 文件”，上传您的 swagger.json 或 openapi.yaml。
2、导入成功后，展开任一接口，点击“Mock 响应”标签页。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
3、Trae 自动展示符合 status code、content-type 及 schema 类型要求的响应体，支持一键导出为 Mock.js 兼容格式或 Node.js Express 中间件代码片段。
三、使用 Trae 内置的 mock 模板库快速调用预设结构
Trae 提供了覆盖常见业务场景的 mock 模板（如分页列表、树形菜单、表单校验规则等），可直接加载并微调字段值。
1、进入 Trae 的“Mock 工具”模块，点击“模板市场”按钮。
2、在搜索框中输入“table”、“tree”或“form”，筛选对应模板。
3、点击任一模板右侧的插入到当前工作区，即可编辑字段名称、数据范围及生成条数，再点击“生成”获得最终数据。
四、结合前端代码上下文实时生成匹配数据
当在 VS Code 或 WebStorm 中安装 Trae 插件后，可在 JavaScript/TypeScript 文件中选中一个接口调用函数或类型定义，触发上下文感知 mock 生成。
1、在编辑器中右键点击含有 fetch 或 axios 调用的代码行，选择“Trae：生成响应 mock”。
2、插件自动提取 URL 路径、HTTP 方法及 TypeScript 接口类型（如 ApiResponse<UserList>）。
3、Trae 返回与类型完全对齐的 mock 数据，并提示是否自动写入 __mocks__ 目录或替换当前 console.log 占位符。
