跳到主要内容
极客日志极客日志
首页博客AI提示词GitHub精选代理工具
搜索
|注册
博客列表

目录

  1. （1）三大智能体核心区别
  2. （2）三大智能体适用场景
  3. ① @Chat 智能体：“结对编程”伙伴
  4. ② @Builder 智能体：你的“原型加速器”
  5. ③ @Builder with MCP：你的“全栈交付引擎”
  6. （3）实战场景流程示例：构建一个“用户管理中心”
  7. 二、@Builder with MCP 智能体（全栈应用）
  8. （1）核心能力
  9. ① 外部系统连接与操作
  10. ② 全栈应用架构设计
  11. ③ 真实数据生命周期管理
  12. ④ 生产就绪配置与部署
  13. （2）高效使用 @Builder with MCP 的黄金法则
  14. ① 法则一：始于终——蓝图描绘法则
  15. ② 法则二：契约先行——接口驱动法则
  16. ③ 法则三：分层构建——垂直切片法则
  17. ④ 法则四：环境隔离——配置分离法则
  18. ⑤ 法则五：善用其“手”——MCP 工具调用法则
  19. （3）添加 MCP Servers
  20. （4）实战使用流程（以 Vue 项目为例）
  21. ① 第一阶段：项目架构升级 - 从前端到全栈
  22. ② 第二阶段：API 集成与前端改造
  23. ③ 第三阶段：高级数据库功能实现
  24. ④ 第四阶段：数据库优化与监控
  25. ⑤ 第五阶段：数据迁移与生产部署
  26. backend/Dockerfile
  27. 三、@Builder 智能体（“从 0 到 1”的创造）
  28. （1）核心能力：@Builder 与 @Chat 的本质区别
  29. （2）高效使用 @Builder 智能体的黄金法则
  30. （3）实战使用流程（以 Vue 项目为例）
  31. ① 第一阶段：项目初始化与骨架搭建
  32. ② 第二阶段：页面内容生成与数据模拟
  33. ③ 第三阶段：预览、微调与组合使用智能体
  34. 四、@Chat 智能体（“从 1 到 N”的优化）
  35. （1）核心能力
  36. （2）高效使用 @Chat 智能体的黄金法则
  37. （3）实战使用流程（以 Vue 项目为例）
  38. ① 第一阶段：优化任务列表页 - 增强交互功能
  39. ② 第二阶段：增强仪表盘 - 添加数据可视化
  40. ③ 第三阶段：优化用户体验 - 添加高级功能
  • 💰 8折买阿里云服务器限时8折了解详情
JavaScriptNode.jsAI大前端

TRAE AI 智能体构建 Vue 3 + Node.js + MySQL 全栈应用实战

TRAE 三大智能体（@Chat、@Builder、@Builder with MCP）的区别与适用场景，重点演示了如何利用 @Builder with MCP 结合 MySQL 和 Node.js 构建全栈应用。内容涵盖架构升级、API 集成、数据库优化及生产部署流程，展示了如何通过 AI 辅助实现从前端原型到后端数据打通的完整开发链路。

岁月神偷发布于 2026/4/5更新于 2026/4/2012 浏览
TRAE AI 智能体构建 Vue 3 + Node.js + MySQL 全栈应用实战

一、TRAE 三大智能体简介

TRAE 三大智能体：

  • @Chat 智能体：全能技术专家。你给他具体指令，他帮你解决具体问题。
  • @Builder 智能体：项目总监或产品经理。你告诉他想法或目标，他会制定计划、分配资源，交付完整项目原型。
  • @Builder with MCP：拥有超级权限的 CTO。不仅能做项目总监的工作，还能直接调用基础设施（数据库、云服务、内部工具），交付真正可用的生产系统。

如何选择：

  • 要修改或理解现有代码？→ @Chat 智能体
  • 要创建新的页面或项目，但不需要/还没准备好连接真实数据库？→ @Builder 智能体
  • 要创建连接了真实数据库、API 的全栈应用，或集成外部服务？→ @Builder with MCP 智能体

最佳实践是组合使用：用 @Builder with MCP 搭建坚实的全栈基础，用 @Builder 快速探索新功能原型，用 @Chat 进行日常的代码维护和优化。

（1）三大智能体核心区别

特性维度@Chat 智能体@Builder 智能体@Builder with MCP 智能体
核心角色代码级助手项目级构建者系统级架构师
工作粒度文件/代码块 (函数、组件、样式)功能/页面/项目 (完整功能模块、项目骨架)全栈应用/数据流 (前端 + 后端 + 数据库 + 服务)
交互模式对话驱动 (你问它答，你指令它执行)目标驱动 (你描述'做什么'，它决定'怎么做')资源驱动 (你描述目标，它调度外部资源来实现)
核心输入代码片段、错误信息、自然语言指令自然语言需求描述、设计稿、产品原型图自然语言需求描述、数据库 Schema、API 文档、外部工具配置
核心输出代码片段、修改建议、解释、修复方案结构化、可运行的项目文件和代码连接了真实数据源和服务、具备完整数据流的生产就绪项目
数据能力操作前端模拟数据 (Mock)操作前端模拟数据 (Mock)连接并操作真实数据库 (MySQL/PostgreSQL 等)、调用外部 API
决策权低 (等待你的每一步指令)中 (自主进行技术选型、项目结构设计)高 (自主进行系统架构、数据库设计、服务集成)

（2）三大智能体适用场景

① @Chat 智能体：'结对编程'伙伴

典型场景：

  • 日常编码与调试： '帮我写一个 Vue 3 的 Composable 来管理用户登录状态。'
  • 代码解释与学习： '解释一下这段 Pinia Store 的代码是如何工作的？'
  • 代码重构与优化： '帮我优化这个组件，让它支持虚拟滚动。'
  • 单文件修改： '在 UserProfile.vue 组件里，为表单添加一个邮箱格式验证。'
② @Builder 智能体：你的'原型加速器'

典型场景：

  • 项目冷启动： '创建一个 React + TypeScript + Ant Design 的管理后台。'
  • 功能模块生成： '在我的 Vue 项目中，为一个电商产品生成完整的商品详情页。'
  • 从设计到代码： （上传一张 Figma 设计稿） '请参考这个设计稿，搭建出对应的 Vue 页面组件。'
③ @Builder with MCP：你的'全栈交付引擎'

典型场景：

  • 全栈应用开发： '构建一个任务管理系统，前端用 Vue，后端用 Node.js(Express)，数据库用 MySQL。'
  • 数据库设计与集成： '为我的博客系统设计数据库 Schema，创建表，并建立关联，然后提供相应的 RESTful API。'
  • 外部服务集成： '在我的项目中集成 GitHub API，实现一个可以显示我的仓库列表和最新提交的功能。'

（3）实战场景流程示例：构建一个'用户管理中心'

协同使用三大智能体：

  1. 阶段一：项目初始化 (使用 @Builder with MCP)：构建用户管理中心，前端 Vue 3 + Element Plus，后端 Express，MySQL 数据库。实现用户的增删改查 (CRUD) 和分页查询 API。
  2. 阶段二：功能增强 (使用 @Chat 智能体)：为这个用户表格添加一个'导出为 CSV'的功能按钮；在后端的用户创建 API 里，添加对邮箱格式的验证逻辑。
  3. 阶段三：新增模块 (使用 @Builder 智能体)：增加一个'操作日志'模块，记录用户的关键操作。请先在前端创建一个日志查看页面，用表格展示，数据暂时用 Mock。
  4. 阶段四：数据持久化 (使用 @Builder with MCP)：将'操作日志'模块落地。在数据库中创建 logs 表，创建对应的后端 API，并将前端页面连接到真实 API。

二、@Builder with MCP 智能体（全栈应用）

@Builder with MCP 智能体核心价值：让 @Builder 能够连接和操作外部工具与数据源，如数据库、API、GitHub 等。将我们的"企业任务管理系统"升级为连接真实 MySQL 数据库的全栈应用。

（1）核心能力

@Builder with MCP 的核心能力可以概括为：通过标准化协议，将 AI 的规划与构建能力，与真实世界的数据、工具和服务相连接，实现从'虚拟代码生成'到'物理系统构建'的跨越。

① 外部系统连接与操作
  • 数据库操作：直接连接并操作 MySQL、PostgreSQL、MongoDB 等数据库。它能执行 DDL 语句设计 Schema，DML 语句管理数据，执行复杂查询和事务。
  • API 集成：调用外部 RESTful API、GraphQL 端点。例如，集成 GitHub API 获取仓库信息，调用云服务商的 API。
  • 服务器管理：通过 SSH 连接服务器，执行命令、部署应用、查看日志。
  • 版本控制：与 Git 交互，完成提交代码、创建分支、解决冲突等操作。
② 全栈应用架构设计
  • 前后端分离架构：自动规划并生成前端（Vue/React）和后端（Node.js/Express，Python/FastAPI）项目结构。
  • 数据流设计：设计从数据库 -> 后端 API -> 前端状态管理（Pinia/Redux）-> 视图组件的完整数据流。
  • API 设计与实现：自动创建符合 REST 规范的 API 端点，并生成对应的 Swagger/OpenAPI 文档。
  • 环境配置：区分开发、测试、生产环境，配置数据库连接、环境变量等。
③ 真实数据生命周期管理
  • 数据库迁移：生成并执行数据库迁移脚本，优雅地管理 Schema 变更。
  • 种子数据：创建初始数据和测试数据，确保应用启动时即有可用数据。
  • 数据关联与查询：处理复杂的多表关联查询，优化 N+1 查询问题。
④ 生产就绪配置与部署
  • 容器化：生成 Dockerfile 和 docker-compose.yml 文件，实现应用容器化。
  • CI/CD 流水线：创建 GitHub Actions、GitLab CI 等配置文件，实现自动化测试和部署。
  • 监控与日志：集成应用性能监控和结构化日志记录。

（2）高效使用 @Builder with MCP 的黄金法则

要驾驭这个强大的工具，必须遵循以下法则，其核心思维是从'程序员'转变为'系统架构师与产品经理'。

① 法则一：始于终——蓝图描绘法则

在发出第一条指令前，必须清晰地构想出最终系统的完整蓝图。 黄金指令： '构建一个全栈任务管理系统：前端 Vue 3 + Composition API + Element Plus，后端 Node.js + Express，数据库 MySQL，需要 users、tasks、teams 表，并描述清楚字段和关联关系。核心功能：用户认证、任务 CRUD、任务分配、状态流转。部署：提供 Docker 化配置。'

② 法则二：契约先行——接口驱动法则

在开发具体功能前，先定义好前后端、内外系统之间的'契约'。 黄金指令： '在开始编码前，请先：设计数据库 Schema，给出完整的建表 SQL。基于 Schema，定义出所有后端 API 端点的路径、方法、请求体和响应体格式。根据 API 定义，创建前端的 API Service 层接口文件。'

③ 法则三：分层构建——垂直切片法则

不要水平地一次做完所有功能。而应按功能模块垂直拆分，逐个完成。 黄金指令： '我们分阶段构建：阶段一：用户系统（后端创建 users 表，实现注册、登录 API；前端创建用户登录页面）。阶段二：任务核心（后端创建 tasks 表，实现任务的 CRUD API；前端创建任务列表页面）。'

④ 法则四：环境隔离——配置分离法则

从一开始就严格区分不同环境的配置。 黄金指令： '请为项目配置多环境：development 使用本地 MySQL，日志级别为 debug。production 使用环境变量读取数据库连接字符串，日志级别为 warn。创建 .env.example 文件，并确保敏感信息不被提交到代码库。'

⑤ 法则五：善用其'手'——MCP 工具调用法则

明确指示 @Builder with MCP 去调用具体的 MCP 工具来完成特定任务。 黄金指令： '请使用 MCP 服务器管理工具，通过 SSH 登录到服务器 192.168.1.100，部署刚才构建的后端应用。'

（3）添加 MCP Servers

文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图

（4）实战使用流程（以 Vue 项目为例）

① 第一阶段：项目架构升级 - 从前端到全栈

目标： 将纯前端的 Vue 应用升级为包含 Node.js 后端和 MySQL 数据库的全栈应用。

指令（启动 @Builder with MCP 智能体）： "请使用 MCP 能力，为现有的'企业任务管理系统' Vue 项目创建完整的后端架构：后端要求：使用 Node.js + Express 框架连接 MySQL 数据库，创建以下表：users (id, name, email, position, avatar), tasks (id, title, description, status, priority, assignee_id, due_date, created_at), task_status (id, name, color)。提供完整的 RESTful API。数据库配置：数据库名 task_management，使用 Sequelize ORM，包含数据迁移和种子数据。请同时更新前端 Vue 项目，将所有 Pinia store 改为调用真实 API。"

@Builder with MCP 的行动：

  • 通过 MCP 连接 MySQL：创建数据库连接配置，执行 SQL 脚本创建数据库和表结构。
  • 生成数据库模型：
// backend/models/Task.js
module.exports = (sequelize, DataTypes) => {
  const Task = sequelize.define('Task', {
    id: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true },
    title: { type: DataTypes.STRING, allowNull: false },
    description: { type: DataTypes.TEXT, allowNull: true },
    status: { type: DataTypes.INTEGER, allowNull: false, defaultValue: 1 },
    priority: { type: DataTypes.ENUM('low', 'medium', 'high', 'urgent'), allowNull: false, defaultValue: 'medium' },
    assignee_id: { type: DataTypes.INTEGER, allowNull: true },
    due_date: { : ., :  },
    : { : ., : , : . }
  }, { : , :  });
   ;
};
  • 生成后端项目结构： 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图
② 第二阶段：API 集成与前端改造

目标： 将前端的数据源从模拟数据切换到真实 API。

指令（启动 @Builder with MCP 智能体）： "现在请更新前端 Vue 项目：创建 src/services/api.js 封装所有 API 调用，改造 taskStore 和 teamStore，移除模拟数据，改为调用后端 API，添加加载状态和错误处理，在 main.js 中配置 axios 基础 URL"

@Builder with MCP 的行动：

  • 改造 Pinia Store：
// src/stores/taskStore.js
import { defineStore } from 'pinia'
import { taskApi } from '@/services/api'

export const useTaskStore = defineStore('task', {
  state: () => ({
    tasks: [],
    loading: false,
    error: null,
    filter: { status: '', priority: '', assignee: '' },
    pagination: { currentPage: 1, pageSize: 10, total: 0 }
  }),
  getters: {
    filteredTasks: (state) => {
      return state.tasks.filter(task => {
        let match = true
        if (state.filter.status && task.status !== state.filter.status) match = false
        if (state.filter.priority && task.priority !== state..) match = 
         (state.. && (!task. || task.. !== (state..))) match = 
         match
      })
    },
    :  {
       statusMap = { : , : , :  }
       stats = { : , : , : , : state.. }
      state..( {
         frontEndStatus = statusMap[task.] || 
         (frontEndStatus === ) stats.++
          (frontEndStatus === ) stats.++
          (frontEndStatus === ) stats.++
      })
       stats
    }
  },
  : {
    () {
      . = { ...., ...filter }
      .()
    },
     () {
      . = 
      . = 
       {
         params = { ...., : .., : .. }
         response =  taskApi.(params)
        . = response. || response
        .. = response. || ..
      }  (error) {
        . = error.
        .(, error)
      }  {
        . = 
      }
    },
     () {
      . = 
      . = 
       {
         newTask =  taskApi.(taskData)
        ..(newTask)
        ..++
         newTask
      }  (error) {
        . = error.
         error
      }  {
        . = 
      }
    },
     () {
      . = 
      . = 
       {
         updatedTask =  taskApi.(id, updates)
         index = ..( task. === id)
         (index !== -) .[index] = { ....[index], ...updatedTask }
         updatedTask
      }  (error) {
        . = error.
         error
      }  {
        . = 
      }
    },
     () {
      . = 
      . = 
       {
         taskApi.(id)
         index = ..( task. === id)
         (index !== -) {
          ..(index, )
          ..--
        }
         
      }  (error) {
        . = error.
         error
      }  {
        . = 
      }
    }
  }
})
  • 创建 API 服务层：
// src/services/api.js
import axios from 'axios';

const api = axios.create({ timeout: 10000, headers: { 'Content-Type': 'application/json' } });

api.interceptors.request.use(config => config, error => Promise.reject(error));
api.interceptors.response.use(response => response.data, error => {
  console.error('API Error:', error);
  let errorMessage = '请求失败';
  if (error.response) {
    switch (error.response.status) {
      case 401: errorMessage = '未授权，请重新登录'; break;
      case 403: errorMessage = '拒绝访问'; break;
      case 404: errorMessage = '请求的资源不存在'; break;
      case 500: errorMessage = '服务器错误'; break;
      : errorMessage = error..?. || ;
    }
  }   (error.) {
    errorMessage = ;
  }
   .( (errorMessage));
});

  taskApi = {
  :  api.(, { params }),
  :  api.(),
  :  api.(, taskData),
  :  api.(, taskData),
  :  api.(),
  :  api.()
};

  userApi = {
  :  api.(),
  :  api.()
};

  api;

文章配图 文章配图

③ 第三阶段：高级数据库功能实现

目标： 实现复杂的数据库查询和业务逻辑。

指令（启动 @Builder with MCP 智能体）： "请为任务系统添加以下高级功能：任务统计 API (GET /api/dashboard/stats)，任务评论功能 (创建 comments 表)，文件附件 (创建 attachments 表)，数据库事务。"

@Builder with MCP 的行动： 文章配图 文章配图

④ 第四阶段：数据库优化与监控

目标： 优化数据库性能和添加监控功能。

指令（启动 @Builder with MCP 智能体）： "请为系统添加数据库优化措施：为常用查询字段添加数据库索引，实现数据库查询性能监控，添加数据备份机制，实现数据库连接池配置。"

@Builder with MCP 的行动：

  • 配置数据库连接池：
// backend/config/config.js
{
  "development": {
    "username": "root",
    "password": "password",
    "database": "task_management",
    "host": "127.0.0.1",
    "dialect": "mysql",
    "pool": { "max": 10, "min": 0, "acquire": 30000, "idle": 10000 },
    "logging": true
  },
  "test": {
    "username": "root",
    "password": "password",
    "database": "task_management_test",
    "host": "127.0.0.1",
    "dialect": "mysql",
    "pool": { "max": 10, "min": 0, "acquire": 30000, "idle": 10000 },
    "logging": false
  },
  "production": {
    "username": "root",
    "password": "password",
    "database": "task_management",
    "host": "127.0.0.1",
    : ,
    : { : , : , : , :  },
    : 
  }
}
  • 通过 MCP 执行索引优化：
-- backend\migrations\20230101000005-add-indexes.js
-- 为表的常用查询字段添加索引
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.addIndex('tasks', ['status'], { name: 'idx_tasks_status' });
    await queryInterface.addIndex('tasks', ['priority'], { name: 'idx_tasks_priority' });
    await queryInterface.addIndex('tasks', ['assignee_id'], { name: 'idx_tasks_assignee_id' });
    await queryInterface.addIndex('tasks', ['due_date'], { name: 'idx_tasks_due_date' });
    await queryInterface.addIndex('tasks', ['created_at'], { name: 'idx_tasks_created_at' });
    await queryInterface.addIndex('comments', ['task_id'], { name: 'idx_comments_task_id' });
    await queryInterface.addIndex('comments', ['user_id'], { name: 'idx_comments_user_id' });
    await queryInterface.addIndex('comments', ['created_at'], { name: 'idx_comments_created_at' });
    await queryInterface.addIndex('attachments', ['task_id'], { name: 'idx_attachments_task_id' });
    await queryInterface.addIndex('attachments', ['user_id'], { name: 'idx_attachments_user_id' });
    await queryInterface.addIndex('users', ['email'], { name: 'idx_users_email', unique: true });
    await queryInterface.addIndex('users', ['name'], { name:  });
  },
  down: async (queryInterface)  {
    await queryInterface.removeIndex(, );
    await queryInterface.removeIndex(, );
    await queryInterface.removeIndex(, );
    await queryInterface.removeIndex(, );
    await queryInterface.removeIndex(, );
    await queryInterface.removeIndex(, );
    await queryInterface.removeIndex(, );
    await queryInterface.removeIndex(, );
    await queryInterface.removeIndex(, );
    await queryInterface.removeIndex(, );
    await queryInterface.removeIndex(, );
    await queryInterface.removeIndex(, );
  }
};

文章配图 文章配图

⑤ 第五阶段：数据迁移与生产部署

目标： 准备生产环境的数据和部署配置。

指令（启动 @Builder with MCP 智能体）： "请准备生产环境部署：创建数据库迁移脚本，生成生产环境的数据种子，创建 Docker 配置文件，设置环境变量配置。"

@Builder with MCP 的行动：

  • 创建 Docker 配置：
# backend/Dockerfile
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN mkdir -p logs backups
ENV NODE_ENV=production
ENV PORT=3000
EXPOSE 3000
CMD ["npm", "start"]
  • 创建数据库迁移：
// backend\migrations\20230101000006-production-migration.js
module.exports = {
  up: async (queryInterface, Sequelize) => {
    const transaction = await queryInterface.sequelize.transaction();
    try {
      await queryInterface.createTable('task_statuses', {
        id: { allowNull: false, autoIncrement: true, primaryKey: true, type: Sequelize.INTEGER },
        name: { type: Sequelize.STRING, allowNull: false, unique: true },
        created_at: { allowNull: false, type: Sequelize.DATE },
        updated_at: { allowNull: false, type: Sequelize.DATE }
      }, { transaction });
      await queryInterface.createTable('users', {
        id: { allowNull: false, autoIncrement: true, primaryKey: , : . },
        : { : ., :  },
        : { : ., : , :  },
        : { : ., : , :  },
        : { : , : . },
        : { : , : . }
      }, { transaction });
       queryInterface.(, {
        : { : , : , : , : . },
        : { : ., :  },
        : { : . },
        : { : ., : , : { : , :  } },
        : { : .(, , , ), : , :  },
        : { : ., : { : , :  } },
        : { : . },
        : { : , : . },
        : { : , : . }
      }, { transaction });
       queryInterface.(, {
        : { : , : , : , : . },
        : { : ., :  },
        : { : ., : , : { : , : , :  } },
        : { : ., : , : { : , :  } },
        : { : , : . }
      }, { transaction });
       queryInterface.(, {
        : { : , : , : , : . },
        : { : ., :  },
        : { : ., :  },
        : { : ., :  },
        : { : ., :  },
        : { : ., : , : { : , : , :  } },
        : { : ., : , : { : , :  } },
        : { : , : . }
      }, { transaction });
       queryInterface.(, [], { : , transaction });
       queryInterface.(, [], { : , transaction });
       queryInterface.(, [], { : , transaction });
       queryInterface.(, [], { : , transaction });
       queryInterface.(, [], { : , transaction });
       queryInterface.(, [], { : , transaction });
       queryInterface.(, [], { : , transaction });
       queryInterface.(, [], { : , transaction });
       queryInterface.(, [], { : , transaction });
       queryInterface.(, [], { : , transaction });
       queryInterface.(, [], { : , : , transaction });
       queryInterface.(, [], { : , transaction });
       transaction.();
    }  (error) {
       transaction.();
       error;
    }
  },
  :  (queryInterface) => {
     queryInterface.();
     queryInterface.();
     queryInterface.();
     queryInterface.();
     queryInterface.();
  }
};

文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图

整个前后端分离环境架构已部署好，后面就是优化细节了！

三、@Builder 智能体（'从 0 到 1'的创造）

TRAE @Builder 智能体：从想法到成品的项目构建引擎 @Builder 智能体，特别是其 SOLO 模式，核心价值在于处理更宏观、更复杂的项目初始化与构建任务。它能将你的自然语言描述或一张设计图，直接转化成一个可运行的项目骨架。

文章配图

（1）核心能力：@Builder 与 @Chat 的本质区别

特性@Builder 智能体 (SOLO 模式)@Chat 智能体
任务粒度项目级/功能级：创建整个应用、完整页面文件/代码块级：修改函数、解释代码、修复错误
交互模式目标驱动：你提供'做什么'，它决定'怎么做'并执行。指令驱动：你一步步下达'怎么做'的指令。
输出结果完整的、结构化的项目文件、配置和可运行的代码库。代码片段、建议、解释，需要你手动整合。
最佳场景项目冷启动、原型开发、从设计稿到代码日常编码、调试、迭代优化、学习代码

简单比喻：我想盖房子。找 @Builder：我给它一张房屋设计图，它直接给我打好地基、搭好框架、建好毛坯房。找 @Chat：我告诉它'这里砌一堵墙'、'那里装一扇窗'，它给我砖头和窗户，我来砌。

（2）高效使用 @Builder 智能体的黄金法则

@Builder 智能体彻底改变了项目启动的方式。我们的核心技能不再是编写每一行代码，而是精准地定义问题、描述需求和验收成果。

  • 目标清晰，描述具体：不佳：'做个好看的网站。'优秀：'创建一个单页作品集，包含关于我、项目展示（网格布局）、博客文章列表（时间线布局）和联系方式，使用 Tailwind CSS 框架。'
  • 分步构建，由粗到精：对于极其复杂的项目，不要试图一蹴而就。先用 @Builder 搭建'毛坯房'（项目骨架和基础功能），再用 @Chat 进行'精装修'（样式优化、复杂逻辑）。
  • 善用视觉输入：一张设计图抵得上千言万语。@Builder 的多模态能力能极大提升还原度。
  • 理解其局限性：@Builder 生成的通常是'毛坯房'（高质量的原型），复杂的业务逻辑、API 对接和极致的性能优化，仍需我们借助 @Chat 智能体或手动编码来完成。
  • 技术栈声明前置：在给 @Builder 的初始指令中，必须明确 Vue 3, Composition API, <script setup>，状态管理库和 UI 组件库，这是生成高质量、符合你习惯代码的关键。
  • 数据管理要明确：明确要求 @Builder 使用 Pinia 来管理模拟数据，这能保证项目结构清晰，数据流可控。
  • 善用'组合智能体'工作流：这是最高效的工作流。@Builder 负责'从 0 到 1'的创造，@Chat 负责'从 1 到 N'的优化。

（3）实战使用流程（以 Vue 项目为例）

① 第一阶段：项目初始化与骨架搭建

指令（启动 @Builder 智能体）： '请使用 SOLO 模式，为我创建一个 Vue 3 企业任务管理系统的前端项目。核心要求：技术栈：Vue 3 + <script setup> + Vite + Vue Router + Pinia + Element Plus。页面结构：仪表盘 (/dashboard)、任务列表 (/tasks)、团队 (/team)。布局：使用经典的左侧导航栏 + 右侧主内容区的布局。数据：使用 Pinia 管理应用状态，并为每个页面生成模拟数据。样式：整体风格要求专业、简洁，符合企业管理系统的气质。'

@Builder 智能体的行动与输出：

  • 项目规划：分析需求，生成一个详细的项目结构图。
  • 初始化项目：创建 package.json，并安装指定的所有依赖。
  • 生成核心文件：src/main.js, src/App.vue, src/layouts/DefaultLayout.vue, src/router/index.js, src/stores/app.js。 此时，@Builder 已经交付了一个可运行的项目骨架。

文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图

打开系统网址：http://127.0.0.1:5173/

文章配图 文章配图 文章配图

② 第二阶段：页面内容生成与数据模拟

指令（启动 @Builder 智能体）： '很好，基础骨架已经完成。现在请为三个主要页面生成具体的 UI 内容和模拟数据：仪表盘页面 (/dashboard)：顶部放置三个统计卡片。下方展示一个'近期任务'列表。任务列表页面 (/tasks)：使用 ElTable 展示任务，列包括 ID、任务名称、状态、优先级、负责人、截止日期。顶部提供筛选栏。团队页面 (/team)：使用卡片网格展示团队成员。数据层：请在 Pinia 中创建一个 taskStore 和一个 teamStore 来集中管理这些模拟数据。'

@Builder 智能体的行动与输出：

  • 创建 Store：src/stores/taskStore.js, src/stores/teamStore.js。
  • 生成页面组件：src/views/DashboardView.vue, src/views/TasksView.vue, src/views/TeamView.vue。 此时，再次预览应用，会发现它已经是一个功能完整、数据充盈的原型了。

文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图

③ 第三阶段：预览、微调与组合使用智能体

**1. 预览与发现问题：**发现'仪表盘'的统计卡片样式比较普通，希望更突出。 2. 切换至 @Chat 智能体进行精细调整： 指令（启动 @Chat 智能体）：'请优化这个仪表盘页面中三个统计卡片的样式。让它们背景色采用渐变色，数字字体更大更粗，并添加一个对应的图标。' @Chat 智能体会直接修改该文件中的模板和样式代码。

文章配图 文章配图 文章配图 文章配图 文章配图

**3. 使用 @Builder 添加新功能：**现在，需要一个'任务详情'页面。 指令（启动 @Builder 智能体）：'请在现有项目中增加一个'任务详情'页面。路由为 /task/:id。当在任务列表点击某个任务名时，应能跳转到该详情页。详情页需要展示该任务的所有信息，并提供一个'编辑'按钮（功能待实现）。请同时更新路由和任务列表的链接。' **@Builder 智能体的行动与输出：**创建 src/views/TaskDetailView.vue 组件，更新 src/router/index.js，修改 TasksView.vue。

文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图

四、@Chat 智能体（'从 1 到 N'的优化）

TRAE 中的 Chat 智能体是整个 IDE 的智能中枢，它超越了简单的聊天机器人，是一个能理解整个项目上下文、并执行具体操作的编程伙伴。

文章配图

（1）核心能力

  • 自然语言编程：用日常语言描述项目代码设计的需求，智能体会生成相应的代码。
  • 代码解释与调试：选中不理解的代码或报错，让它解释或提供修复方案。
  • 项目上下文感知：它能基于整个项目的代码库进行回答和操作，理解项目架构和风格。
  • 自动化重构：提出代码优化建议，并直接帮忙完成重构。
  • 文件与资源操作：根据问题指令创建新文件、安装依赖、甚至启动开发服务器。

（2）高效使用 @Chat 智能体的黄金法则

将 TRAE 的 Chat 智能体当作一个能力超群、不知疲倦的编程伙伴。核心任务是从'写代码'转变为'提需求、做审查和定方向'。

  • 上下文是关键：提供充足背景。在提问前，确保智能体已经加载了指定项目。在复杂问题上，可以在问题中说'参考一下 utils/api.js 文件里的格式'。
  • 精准描述：与其说'这里出错了'，不如说'这个函数在用户登录时抛出了类型错误，请看 LoginForm.js 第 25 行附近的 handleSubmit 函数'。
  • 迭代式精炼：从静态数据到动态交互，从基础功能到高级功能，一步步地向智能体提出需求。不要试图在一个指令中完成所有事情。
  • 善用指令与快捷方式：TRAE 通常支持一些快捷指令，如 /test（为这段代码生成测试）、/explain（详细解释）、/fix（尝试自动修复）。
  • 明确技术栈：在指令中开头就声明'使用 Vue 3 + Composition API + <script setup>'，让智能体生成最符合个人习惯的代码。
  • 善用组件库：直接要求智能体使用 Element Plus、Ant Design Vue 等知名组件库来重构 UI，能极大提升开发效率和界面美观度。
  • 让智能体调试：遇到任何错误或警告，直接将错误信息复制给智能体，并说明上下文，它不仅能修复，还能解释报错原因。
  • 结合 SOLO 模式进行飞跃：对于更宏大的任务，直接使用 SOLO 模式。可以上传一张设计图或提供一个产品链接，然后说'参考这张设计图，在我的项目中搭建一个类似的主页 UI。'

（3）实战使用流程（以 Vue 项目为例）

① 第一阶段：优化任务列表页 - 增强交互功能

目标： 为任务列表添加编辑、状态快速更改和高级筛选功能。

1. 实现行内编辑功能

指令（启动 @Chat 智能体）：'在 Tasks.vue 的任务表格中，我希望可以点击'任务名称'直接进行编辑。请实现：当点击任务名称时，变为输入框，编辑完成后按回车或失去焦点保存到 store。' @Chat 智能体的行动：在 taskStore 中添加 updateTask action，修改表格列，为任务名称添加 el-input 和编辑状态控制，实现编辑逻辑和保存功能。

文章配图 文章配图 文章配图 文章配图

2. 添加快速状态更改按钮

指令（启动 @Chat 智能体）：'在任务表格的操作列中，添加'开始'、'完成'、'重新打开'的快速操作按钮。根据任务状态显示不同的按钮，点击后直接更新任务状态。' @Chat 智能体的行动：在 taskStore 中添加 changeTaskStatus action，在操作列中添加条件渲染的按钮，实现状态转换逻辑。

文章配图 文章配图 文章配图 文章配图 文章配图

② 第二阶段：增强仪表盘 - 添加数据可视化

目标： 在仪表盘添加图表，直观展示任务数据。

添加任务状态分布饼图

指令（启动 @Chat 智能体）：'在仪表盘页面的统计卡片下方，添加一个 ECharts 饼图，展示任务状态分布（待处理、进行中、已完成）。请安装 ECharts 依赖并集成到 Vue 中。' @Chat 智能体的行动：安装 echarts 和 vue-echarts 依赖，在 DashboardView.vue 中集成饼图组件，从 store 中计算状态分布数据。

文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图

③ 第三阶段：优化用户体验 - 添加高级功能

1. 实现任务拖拽排序

指令（启动 @Chat 智能体）：'在任务列表页面，我希望可以通过拖拽来调整任务的显示顺序。请使用 Sortable.js 实现表格行的拖拽排序功能。' @Chat 智能体的行动：安装 sortablejs 依赖，在表格挂载后初始化 Sortable.js，实现拖拽结束后的数据更新逻辑。

文章配图 文章配图 文章配图 文章配图 文章配图

2. 添加数据导出功能

指令（启动 @Chat 智能体）：'在任务列表页面顶部添加一个'导出 Excel'按钮，点击后可以将当前筛选的任务数据导出为 CSV 格式文件。' @Chat 智能体的行动：实现 CSV 格式转换函数，创建 Blob 对象并触发下载，添加导出按钮和点击事件。

文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图 文章配图

  • 💰 8折买阿里云服务器限时8折购买
  • 🦞 5分钟部署阿里云小龙虾了解详情
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog

更多推荐文章

查看全部
  • Visual C++ Redistributable 是什么？为什么需要安装？
  • 前端面试题精选：ES6 跨域 Vue 性能优化及 10w 数据展示
  • 机器学习中的逻辑回归
  • 基于 Java 与高德地图的县域烟花销售点 GIS 盘点实践
  • Stable Diffusion 显存释放指南：解决内存不足问题
  • TemporalKit 插件解决 Stable Diffusion 视频抖动问题
  • Telegram 群组管理机器人搭建指南
  • 无需扩展插件即可在 Copilot 接入第三方 OpenAI 接口
  • 基于 WebGIS 的基孔肯雅热流行风险地区分类与可视化
  • mPLUG-Owl3-2B 图文交互工具实测：100 张测试图平均准确率 86.7%
  • 大模型训练：LLaMA-Factory 快速上手
  • Flutter shelf_modular 鸿蒙化适配指南及路由治理实战
  • GitHub Copilot 学生认证申请流程与注意事项
  • 基于 SpringBoot2 与 Vue3 的在线考试系统架构设计
  • 面向前端开发者的 AI 编码共享插件：Claude Code、Codex 与 OpenClaw 实践
  • Vue 开源 AI 低代码表单设计器 FcDesigner 使用指南
  • 沃尔玛：AI 助手 Sparky 凭速度与便利赢得信任
  • AIGC 微电影《编钟》制作流程复盘
  • 生成合成类算法自评估报告撰写指南与模板示例
  • Win10/11 如何彻底关闭 Windows Defender 杀毒软件

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

type
DataTypes
DATE
allowNull
true
created_at
type
DataTypes
DATE
allowNull
false
defaultValue
DataTypes
NOW
tableName
'tasks'
timestamps
false
return
Task
filter
priority
false
if
filter
assignee
assignee
assignee
id
parseInt
filter
assignee
false
return
taskStats
(state) =>
const
1
'pending'
2
'in_progress'
3
'completed'
const
pending
0
inProgress
0
completed
0
total
tasks
length
tasks
forEach
task =>
const
status
'pending'
if
'pending'
pending
else
if
'in_progress'
inProgress
else
if
'completed'
completed
return
actions
setFilter
filter
this
filter
this
filter
this
fetchTasks
async
fetchTasks
this
loading
true
this
error
null
try
const
this
filter
page
this
pagination
currentPage
pageSize
this
pagination
pageSize
const
await
getTasks
this
tasks
tasks
this
pagination
total
total
this
tasks
length
catch
this
error
message
console
error
'获取任务列表失败:'
finally
this
loading
false
async
addTask
taskData
this
loading
true
this
error
null
try
const
await
createTask
this
tasks
unshift
this
pagination
total
return
catch
this
error
message
throw
finally
this
loading
false
async
updateTask
id, updates
this
loading
true
this
error
null
try
const
await
updateTask
const
this
tasks
findIndex
task =>
id
if
1
this
tasks
this
tasks
return
catch
this
error
message
throw
finally
this
loading
false
async
deleteTask
id
this
loading
true
this
error
null
try
await
deleteTask
const
this
tasks
findIndex
task =>
id
if
1
this
tasks
splice
1
this
pagination
total
return
true
catch
this
error
message
throw
finally
this
loading
false
default
response
data
message
'请求失败'
else
if
request
'网络错误，请检查您的网络连接'
return
Promise
reject
new
Error
export
const
getTasks
(params = {}) =>
get
'/api/tasks'
getTaskById
(id) =>
get
`/api/tasks/${id}`
createTask
(taskData) =>
post
'/api/tasks'
updateTask
(id, taskData) =>
put
`/api/tasks/${id}`
deleteTask
(id) =>
delete
`/api/tasks/${id}`
getTaskStats
() =>
get
'/api/tasks/stats'
export
const
getUsers
() =>
get
'/api/users'
getUserById
(id) =>
get
`/api/users/${id}`
export
default
"dialect"
"mysql"
"pool"
"max"
20
"min"
2
"acquire"
60000
"idle"
20000
"logging"
false
'idx_users_name'
=
>
'tasks'
'idx_tasks_status'
'tasks'
'idx_tasks_priority'
'tasks'
'idx_tasks_assignee_id'
'tasks'
'idx_tasks_due_date'
'tasks'
'idx_tasks_created_at'
'comments'
'idx_comments_task_id'
'comments'
'idx_comments_user_id'
'comments'
'idx_comments_created_at'
'attachments'
'idx_attachments_task_id'
'attachments'
'idx_attachments_user_id'
'users'
'idx_users_email'
'users'
'idx_users_name'
true
type
Sequelize
INTEGER
name
type
Sequelize
STRING
allowNull
false
email
type
Sequelize
STRING
allowNull
false
unique
true
role
type
Sequelize
STRING
allowNull
false
defaultValue
'user'
created_at
allowNull
false
type
Sequelize
DATE
updated_at
allowNull
false
type
Sequelize
DATE
await
createTable
'tasks'
id
allowNull
false
autoIncrement
true
primaryKey
true
type
Sequelize
INTEGER
title
type
Sequelize
STRING
allowNull
false
description
type
Sequelize
TEXT
status
type
Sequelize
INTEGER
allowNull
false
references
model
'task_statuses'
key
'id'
priority
type
Sequelize
ENUM
'low'
'medium'
'high'
'urgent'
allowNull
false
defaultValue
'medium'
assignee_id
type
Sequelize
INTEGER
references
model
'users'
key
'id'
due_date
type
Sequelize
DATE
created_at
allowNull
false
type
Sequelize
DATE
updated_at
allowNull
false
type
Sequelize
DATE
await
createTable
'comments'
id
allowNull
false
autoIncrement
true
primaryKey
true
type
Sequelize
INTEGER
content
type
Sequelize
TEXT
allowNull
false
task_id
type
Sequelize
INTEGER
allowNull
false
references
model
'tasks'
key
'id'
onDelete
'CASCADE'
user_id
type
Sequelize
INTEGER
allowNull
false
references
model
'users'
key
'id'
created_at
allowNull
false
type
Sequelize
DATE
await
createTable
'attachments'
id
allowNull
false
autoIncrement
true
primaryKey
true
type
Sequelize
INTEGER
filename
type
Sequelize
STRING
allowNull
false
filepath
type
Sequelize
STRING
allowNull
false
filesize
type
Sequelize
INTEGER
allowNull
false
filetype
type
Sequelize
STRING
allowNull
false
task_id
type
Sequelize
INTEGER
allowNull
false
references
model
'tasks'
key
'id'
onDelete
'CASCADE'
user_id
type
Sequelize
INTEGER
allowNull
false
references
model
'users'
key
'id'
created_at
allowNull
false
type
Sequelize
DATE
await
addIndex
'tasks'
'status'
name
'idx_tasks_status'
await
addIndex
'tasks'
'priority'
name
'idx_tasks_priority'
await
addIndex
'tasks'
'assignee_id'
name
'idx_tasks_assignee_id'
await
addIndex
'tasks'
'due_date'
name
'idx_tasks_due_date'
await
addIndex
'tasks'
'created_at'
name
'idx_tasks_created_at'
await
addIndex
'comments'
'task_id'
name
'idx_comments_task_id'
await
addIndex
'comments'
'user_id'
name
'idx_comments_user_id'
await
addIndex
'comments'
'created_at'
name
'idx_comments_created_at'
await
addIndex
'attachments'
'task_id'
name
'idx_attachments_task_id'
await
addIndex
'attachments'
'user_id'
name
'idx_attachments_user_id'
await
addIndex
'users'
'email'
name
'idx_users_email'
unique
true
await
addIndex
'users'
'name'
name
'idx_users_name'
await
commit
catch
await
rollback
throw
down
async
await
dropTable
'attachments'
await
dropTable
'comments'
await
dropTable
'tasks'
await
dropTable
'users'
await
dropTable
'task_statuses'
文章配图
文章配图
文章配图
文章配图
文章配图
文章配图
文章配图
文章配图
文章配图