【TRAE】AI 编程:AI 驱动下的 Vue 全栈实战——从 TRAE 工具入门到项目落地

【TRAE】AI 编程:AI 驱动下的 Vue 全栈实战——从 TRAE 工具入门到项目落地

目录

一、TRAE 简介

(1)产品愿景

(2)核心定位

(3)核心模式

① SOLO 模式 / Builder 模式

② IDE 模式 / Chat 模式

(4)核心功能与体验

① 全场景开发支持

② Cue 智能续写(升级)

③ 深度上下文感知

④ 智能排查 Bug

(5)智能体生态

① 可自定义智能体

② 工具自由装配 (via MCP)

③ Trae Rules

④ 智能体市场

(6)支持模型

(7)平台与获取

(8)隐私与安全

① 原则

② 数据隐私

③ 安全控制

④ 区域化部署

(9)核心价值

二、TRAE 下载安装

(1)TRAE 下载

(2)TRAE 安装

三、TRAE 创建项目

(1)导入本地文件夹

(2)从 GitHub 克隆仓库

(3)直接从 Git 仓库的 URL 克隆

四、TRAE 插件管理

(1)插件安装

① 从 TRAE 的插件市场安装

② 从 VS Code 的插件市场安装

③ 导入本地 .vsix 文件

(2)插件卸载

五、TRAE 智能体协助 AI 编程

六、MCP 官方教程



一、TRAE 简介

TRAE 是由字节跳动开发的 AI 原生集成开发环境(AI IDE),它通过深度集成大语言模型,旨在提升各阶段开发者的编程效率。

Trae 官网https://www.trae.com.cn/Trae 官方说明文档https://docs.trae.cn/ide/what-is-trae?_lang=zh

主要特点与优势:本土化优化:TRAE 国内版针对中文开发环境和国内主流技术栈进行了深度适配,并对中文技术文档的理解能力进行了特别优化。多平台与获取方式:TRAE 提供 Windows 和 macOS 版本下载,Linux 版本也已开启预约,可以通过访问 Trae 中国官网下载体验。面向开发者的价值:TRAE 的出现,尤其对于初级开发者编程爱好者来说,大大降低了从想法到实现的门槛,让不具备深厚IT能力的人也能参与到创作中。同时,它也帮助专业程序员从大量重复性工作中解放出来,将更多精力投入到架构设计和业务创新上。
Trae 的核心概览信息
特性分类具体说明
基本定位AI 原生集成开发环境(AI IDE),基于 VS Code 内核
核心模式
  • Builder 模式:用自然语言描述需求,AI自主完成从需求分析到代码生成的多轮编码任务,适合从零启动项目。
  • Chat 模式:像与助手对话一样,进行代码问答、调试、优化等精细化协作。
支持模型
  • 国内版主要搭载 doubao-1.5-pro,支持切换 "满血版" DeepSeek R1 和 DeepSeek V3
  • 海外版曾接入 Claude 模型。
核心功能
  • 一键生成项目:用自然语言指令(如 "做一个带用户登录功能的论坛")生成完整的基础代码框架。
  • 代码自动补全:基于上下文实时预测和续写代码。
  • 智能排查 Bug:深入理解代码仓库,精准定位问题并提供解决方案。
  • 深度上下文感知:能分析整个项目的架构,而不仅仅是当前代码片段。
TRAE 引领 AI 编程新范式:TRAE 通过其革命性的 SOLO 模式和 AI 原生架构,正在将 AI 从编程助手升级为能自主完成开发任务的 “伙伴”,并通过实际案例证明了其能显著提升开发效率,引领着软件开发向人机协同的新范式演进。核心理念:从 “辅助工具” 到 “开发伙伴” 的范式转变TRAE 代表的不是简单的代码补全工具,而是一个能够理解项目上下文、自主执行任务的 “AI 工程师伙伴”。这标志着 AI 编程从 “工具增强” 进入 “流程重构” 的新阶段。革命性功能:SOLO 模式与 Context Engineering(上下文工程)SOLO 模式是 TRAE 的核心突破,它基于 “上下文工程” 理念,使 AI 能够主动感知需求、拆解任务、调度工具并交付完整的软件成果。用户只需用自然语言或图片描述需求,AI 即可自动完成从项目创建到编码、发布的整个流程,极大降低了开发门槛。技术架构:AI 原生的集成开发环境TRAE 是国内首个 AI 原生的 IDE,其 AI 能力深度集成,能理解整个项目代码,而非零散的插件补全。通过 CUE(上下文理解引擎)和 MCP(模型上下文协议)等技术,显著扩展了其自动化能力和上下文感知范围。已验证的实践效果:极高的人机协同开发效率字节跳动技术副总裁的案例:3 天内开发出完成度高的 “积流成江” 英语学习应用,85% 的代码由 AI 生成,证明了其生产环境可用性。行业应用:在字节、阿里等公司,AI 编程已规模化应用,能承担 30%-60% 的代码开发,甚至 50% 的简单需求。未来方向:从 AI Coding(编码)到 AI Development(全流程开发)TRAE 的终极目标是让AI成为软件开发全流程的调度者,自动处理需求、调试、部署、运维等环节(占软件开发 60% 以上的工作)。这将使开发者能更专注于创造性和架构设计等更高价值的工作。

(1)产品愿景


(2)核心定位


(3)核心模式

① SOLO 模式 / Builder 模式

② IDE 模式 / Chat 模式


(4)核心功能与体验

① 全场景开发支持

② Cue 智能续写(升级)

③ 深度上下文感知

④ 智能排查 Bug


(5)智能体生态

① 可自定义智能体

② 工具自由装配 (via MCP)

③ Trae Rules

④ 智能体市场


(6)支持模型


(7)平台与获取


(8)隐私与安全

① 原则

② 数据隐私

③ 安全控制

④ 区域化部署


(9)核心价值



二、TRAE 下载安装

(1)TRAE 下载

Trae 官网下载地址https://www.trae.cn/ide/download


(2)TRAE 安装



三、TRAE 创建项目

(1)导入本地文件夹


(2)从 GitHub 克隆仓库


(3)直接从 Git 仓库的 URL 克隆



四、TRAE 插件管理

(1)插件安装

① 从 TRAE 的插件市场安装

② 从 VS Code 的插件市场安装

VS Code 的插件市场https://marketplace.visualstudio.com/vscode

在搜索结果中,点击所需的插件下载。下载完成后,返回 TRAE 并打开插件市场。将下载的 .vsix 文件拖拽至 插件市场 面板中。TRAE 开始自动安装该插件。安装完成后,该插件会出现在 已安装 列表中。
点击 Version History,结合插件页的 URL 和 Version History 中的信息,提取出以下信息(以 SonarQube for IDE 为例):

1.itemName:URL Query 中的 itemName 字段,如截图中的 SonarSource.sonarlint-vscode,并将小数点(.)前后的内容分成以下两个字段:fieldA:SonarSourcefieldB:sonarlint-vscode

2. version:版本号version:如截图中的 4.34.0
使用提取出来的 3 个字段的值替换下方 URL 中的同名字段:在浏览器中输入修改后的 URL,然后按下回车键。浏览器开始下载该插件。下载完成后,返回 TRAE 并打开插件市场。将下载的 .vsix 文件拖拽至 插件市场 面板中。TRAE 开始自动安装该插件。安装完成后,该插件会出现在 已安装 列表中。

③ 导入本地 .vsix 文件

在弹窗中,选择目标 .vsix 文件导入至 TRAE IDE。

(2)插件卸载



五、TRAE 智能体协助 AI 编程

【TRAE】AI 编程:颠覆全栈开发,基于 TRAE AI 编程完成 Vue 3 + Node.js + MySQL 企业级项目实战,从环境搭建到部署上线https://gusanshang.blog.ZEEKLOG.net/article/details/154664599



六、MCP 官方教程

MCP 教程:将 Figma 设计稿转化为前端代码https://docs.trae.cn/ide/tutorial-mcp-figmaMCP 教程:实现网页自动化测试https://docs.trae.cn/ide/tutorial-mcp-playwrightMCP 教程:使用高德地图 MCP Server 规划行程https://docs.trae.cn/ide/tutorial-mcp-amap

Read more

【前端】001 前端初识——数字世界的门面

今天我们就正式开始学习前端了,那么我们都需要做些什么呢?首先,需要搭建一个前端开发环境,其次,要学习html,CSS,JavaScript,最后,要进行一个前端的项目开发。 一.什么是前端?       1.前端,又名Web前端,用来直接给用户呈现一个一个的网页。一个软件通常情况下是由后端+前端完成。       2.生活中会遇到哪些前端页面?可以主要归结为三类:一类是Web页面,另一类是PC端应用程序页面,还有一类是移动端APP页面。       3.学了这个能达到什么样的水平呢?可以开发出来一个简单的Web页面。 二.什么是HTML?      HTML是一种超文本标记语言。(超文本:意味着我这样一个页面支持文本、声音、图片、视频、表格、链接等数据。那如何能做到一个页面能展示这些数据呢?原来是要通过许许多多的标签,这些标签就组成许许多多的标记)。      HTML页面是运行到浏览器上面的。(推荐下载chrome浏览器) 三.vscode开发工具搭建      为什么推荐vscode?因为vscode是企业开发前端的时候非常常用的一个开发工具。 在v

基于YOLO26/11/v8算法的Web目标检测系统,人脸表情识别系统,Django+Vue3 的前后端分离,实现摄像头实时识别,YOLO26/YOLO11/v8 + LLM大模型智能分析,科研必备

基于YOLO26/11/v8算法的Web目标检测系统,人脸表情识别系统,Django+Vue3 的前后端分离,实现摄像头实时识别,YOLO26/YOLO11/v8 + LLM大模型智能分析,科研必备

✨ 更新日志 * ✔️ 2026/3/3,2.0 版本,前端导航栏改为侧边栏系统,视频流采用websocket框架延迟更低, YOLO26/YOLO11/YOLOv8 视频流更稳定,在之前的系统增加 LLM 大模型智能分析,是科研必备,支持 YOLO26/11/v8 分类模型、目标检测、分割、obb、关键点检测任务,还支持双模型联合检测与识别,如人脸表情识别、人脸识别等一些识别任务需要检测模型与分类模型共同完成,在人脸表情识别中,单独使用检测模型去识别人脸表情也不是不可以,但有一个问题数据集如果全是头部照片的话,当模型预测的照片是全身照片时,模型识别准确率就没有这么高了, 那么这时候可以用检测模型识别人脸,把人脸信息输入到表情分类模型进行分类即可,反正这是一个通用的系统,更换自己模型即可,大家懂得都懂的,更多功能看下文即可。 摘要 在人工智能迈向通用化(AGI)的今天,“视觉感知 + 语言理解”的多模态联合是未来的趋势。单纯的检测画框已经无法满足复杂的业务需求,如何让系统“看懂”

前端八股文面经大全:字节跳动音视频前端一面·上(2026-03-03)·面经深度解析

前端八股文面经大全:字节跳动音视频前端一面·上(2026-03-03)·面经深度解析

前言 大家好,我是木斯佳。 相信很多人都感受到了,在AI浪潮的席卷之下,前端领域的门槛在变高,纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享,如今也沉寂了许多。但我们都知道,市场的潮水退去,留下的才是真正在踏实准备、努力沉淀的人。学习的需求,从未消失,只是变得更加务实和深入。 这个专栏的初衷很简单:拒绝过时的、流水线式的PDF引流贴,专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上,尝试从面试官的角度去拆解问题背后的逻辑,而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招,目标是中大厂还是新兴团队,只要是真实发生、有价值的面试经历,我都会在这个专栏里为你沉淀下来。 温馨提示:市面上的面经鱼龙混杂,甄别真伪、把握时效,是我们对抗内卷最有效的武器。 面经原文内容 📍面试公司:字节跳动 🕐面试时间:3月3日 💻面试岗位:音视频前端(春招) ❓面试问题: 1. 自我介绍 2. 用了哪些方法使FCP渲染耗时缩短近1s 3.

ollama 模型管理、删除模型 、open-webui 开启大模型交互

ollama 模型管理、删除模型 、open-webui 开启大模型交互

文章目录 * ollama 基本信息 * ollama 运行模型 * ollama 模型管理 * 🔧 **方法一:使用命令行删除单个模型** * ⚙️ **方法二:批量删除所有模型** * 🗑️ **方法三:彻底卸载 Ollama(含所有数据)** * ⚠️ **注意事项** * ✅ **验证是否删除成功** * open-webui 安装 开启大模型交互 * open-webui pip 安装 * open-webui 启动服务 * 浏览器访问 http://IP:8082/ : * ❤️ 时不我待,一起学AI ollama 基本信息 * https://ollama.com/ ollama 运行模型 命令行执行即可 0.6B parameter model ollama run qwen3:0.6b 1.7B