字节跳动 AI 原生 IDE Trae 安装与上手图文教程

字节跳动 AI 原生 IDE Trae 安装与上手图文教程

文章目录


一、 什么是 Trae?

简单来说,Trae 是字节跳动近期推出的一款 AI 原生集成开发环境 (IDE)。你可以把它看作是国内打磨极佳的 Cursor 或 Windsurf 替代品。它从底层架构开始就围绕 AI 能力构建,不仅能自动补全代码,还能直接听懂你的大白话,帮你从零开始写项目、修 Bug、甚至一键部署后端服务。

核心亮点:

  • 完全免费:目前处于免费阶段,对于动辄几十美元一个月的 AI 开发工具来说,性价比拉满。
  • 顶级大模型接入:国内版搭载了 Doubao-1.5-pro,并且支持无缝切换满血版 DeepSeek-R1 & V3 等顶级模型。
  • 双核驱动
    • Builder 模式:AI 自动编写代码、跨文件修改、运行终端命令,实现真正的代码“自动驾驶”。
    • Chat 模式:与 AI 对话,解答代码疑问,提供优化建议。
  • 完美兼容 VS Code:支持一键导入 VS Code 的配置、快捷键和海量插件,无缝迁移,零学习成本。

没问题,加入价格对比后,这两个版本的差异会更加直观,也正中很多开发者的痛点(毕竟大家都很关心到底要不要花钱)。

国际版与国内版区别

Trae 国内版 (CN版)Trae 国际版 (Global版)
官方网址trae.com.cntrae.ai
价格与收费完全免费(目前处于推广红利期,国内顶级模型及各项功能均免费畅享)免费额度 + 阶梯订阅制(提供免费基础档;进阶按月收费,如 Lite 档 $3/月,Pro 档 $10/月起,享更多高级模型用量和无限代码补全)
内置大模型Doubao-1.5-pro, DeepSeek-V3, DeepSeek-R1 等Claude 3.5/3.7 Sonnet, GPT-4o 等海外第一梯队闭源模型
网络环境国内直连,响应速度极快且稳定需具备海外网络访问能力(需配置科学网络环境)
账号与登录手机号、微信扫码、火山引擎账号等Google 账号、海外邮箱、Apple ID 等
语言与本地化默认简体中文,深度优化国内开发语境支持中/英双语,面向全球开发者生态

二、 下载与环境准备

第一步:访问官网下载

  1. 在首页根据你的操作系统(Windows 或 macOS)点击对应的下载按钮,将安装包下载到本地。

打开浏览器,访问 Trae 官方网站:https://www.trae.cn/

在这里插入图片描述
注意:目前 Trae 已全面支持 macOS(Apple Silicon/Intel)和 Windows 系统,macOS 用户如果系统版本低于 12,需要在官网底部寻找历史版本下载链接。

第二步:系统安装

  • macOS 用户:双击打开 .dmg 文件,将 Trae 图标拖拽到 Applications(应用程序)文件夹中即可。

Windows 用户:双击下载的 .exe 安装包,按照向导提示,选择安装路径并点击“下一步”即可完成安装。

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

第三步:首次启动与初始化配置

  1. 打开 Trae:首次启动时,界面会弹出一个极简的引导窗口。
  2. 账号登录:你可以选择使用手机号或相关账号进行快捷登录。

安装命令行工具:建议在引导页勾选“在终端中安装 trae 命令”,方便后续直接在终端通过输入 trae . 快速在当前目录唤醒 IDE。

在这里插入图片描述
在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

环境迁移(建议)
如果你之前是 VS Code 的重度用户,Trae 会贴心地提示你一键导入 VS Code 的设置、主题和扩展插件。点击确认后,你的开发环境会 1:1 完美复刻过来。
提示:如果遇到极个别不兼容的插件,可以在 Trae 左侧的“插件市场”面板中手动搜索替换,或通过 .vsix 文件本地导入。

在这里插入图片描述

三、 核心功能上手实战

安装完成后,我们来实操一下,让 Trae 的 AI 帮我们写一个简单的“贪吃蛇游戏”,感受一下“用嘴编程”。

  1. 新建项目:在电脑里新建一个空文件夹,例如命名为 SnakeGame,并用 Trae 打开它。
  2. 唤醒 AI Builder:在界面侧边栏中,找到 Builder 面板(也可以使用快捷键 Cmd/Ctrl + U 快速唤出)。
  3. 见证奇迹
    发送指令后,你会看到 Trae 开始接管工作:它会自动分析需求,在左侧目录创建 index.htmlstyle.cssscript.js 文件,并像一个真人程序员一样逐行写入代码。
  4. 调试与修改:代码生成完毕后,你可以直接预览效果。如果发现任何问题(比如“蛇撞墙没有触发游戏结束”),不要自己改代码!直接在 Builder 聊天框里对它说:“游戏结束的逻辑有 Bug,蛇撞墙没有停止”,它会自动定位到出错的代码块并帮你修复。

输入自然语言指令
在输入框中告诉 AI 你的需求,例如:

“帮我用 HTML、CSS 和 JavaScript 写一个经典的贪吃蛇网页游戏。要求:包含计分板,吃到食物后蛇的移动速度会变快,界面风格要现代化、极简主义。请帮我创建所有必要的文件并完成代码编写。”

四、 进阶技巧:如何切换满血大模型

Trae 非常灵活的一点在于模型切换。在聊天面板的顶部(输入框上方区域),你可以看到一个模型切换下拉菜单

  • 日常开发、写注释、简单逻辑:使用默认模型,响应速度极快,足够应付 80% 的场景。
  • 遇到复杂算法、晦涩报错、重构大段代码:果断在菜单中切换到 DeepSeek-R1(开启深度思考模式)。利用 R1 强大的逻辑推理能力,可以帮你精准解决疑难杂症。

五、 总结

字节跳动这款 Trae 很好地填补了国内好用且免费的 AI 原生 IDE 的空白。它不仅让资深开发者免去了繁琐的增删改查等体力劳动,也让零基础的新手有了快速验证想法的工具。目前产品正处于红利期,内置的高级大模型都可以免费使用,强烈建议各位开发者下载体验!

你在安装和使用 Trae 的过程中感觉如何?有没有遇到什么好玩的 AI 编程技巧?欢迎在评论区留言讨论!

Read more

cpolar远程辅助Open-Lovable实现随时随地克隆网页超实用

cpolar远程辅助Open-Lovable实现随时随地克隆网页超实用

Open-Lovable 是一款面向前端开发者的开源工具,核心功能是将任意网页克隆为可编辑的 React 应用,还支持多类 AI 模型辅助生成代码,适配新手学习、中小企业原型开发等场景。它的优点很贴合实际需求:拆分代码组件清晰,保留完整 CSS 样式,能大幅减少手动搭建页面框架的时间,比如新手学习电商网站布局时,不用再逐行拆解复杂的源代码,直接克隆后就能看清 header、footer 等组件的逻辑,中小企业做产品原型时,克隆同类网页后稍作修改就能快速出效果。 使用这款工具时也有一些实用的小提醒💡:克隆的网页仅能还原静态布局和样式,像登录态、动态交互这类内容无法完整复刻,而且使用前需要准备好 E2B、Firecrawl 等平台的 API 密钥,密钥保管要注意隐私,避免外泄造成不必要的损失。 不过 Open-Lovable 默认只能在本地局域网内使用,这会带来不少不便:比如开发者在家调试的克隆项目,想让公司的设计师远程查看效果,只能通过传文件、远程协助的方式,不仅耗时,还可能出现版本不一致的问题;要是出差在外需要修改克隆的代码,没法直接访问本地的工具,只能等回到电脑前操作,耽误工作

【实战】Windows 下为 Stable Diffusion WebUI 编译 Flash-Attention 2.8.0 专属 Wheel(RTX 3090 sm_86)

【实战】Windows 下为 Stable Diffusion WebUI 编译 Flash-Attention 2.8.0 专属 Wheel(RTX 3090 sm_86)

【实战】Windows 下为 Stable Diffusion WebUI 编译 Flash-Attention 2.8.0 专属 Wheel(RTX 3090 sm_86) 系列:Windows AI 环境 “没有轮子(.whl)就自己造” 从零到一 · 第 N 期 难度:⭐⭐⭐⭐ 适用场景:SD WebUI + xformers 0.0.31.post1 + flash-attn 版本冲突修复 适用场景:其他版本的 Flash-Attention 编译实战请见文末引用链接 一、背景与问题描述 彻底解决 Stable Diffusion WebUI 启动报错:

轻量级前端革命:为什么 Lit 和 Alpine.js 正在悄悄取代你的“重量级”框架?

作为一名摸爬滚打十年的前端老炮儿,我最近在代码仓库里发现一个有趣现象:越来越多的开发者开始“戒掉” React/Vue 的庞大生态,转而拥抱两个名字简单到近乎“冷门”的库——Lit 和 Alpine.js。它们不依赖 Webpack 或 Rollup,直接以纯 ESM(ECMAScript Modules)形式运行,体积小到只有 10KB 左右(压缩后),却能解决日常开发中的高频痛点。今天,咱们就来扒一扒这两位“低调的狠人”,看看它们如何用极简设计,重新定义现代 Web 开发的效率边界。 一、纯 ESM:轻量级库的“灵魂”所在 先搞清楚一个关键点:为什么 ESM 是轻量级库的基石? 传统前端库依赖打包工具(如 Webpack)将代码“打包”

【前端】HTTP请求方式:GET、POST 与其他请求方法详解

【前端】HTTP请求方式:GET、POST 与其他请求方法详解

文章目录 * * 前言 * 定义概念 + 缩写 * 一、HTTP 是什么? * 二、常见请求方式 * 性质 * 一、GET 请求 * 特点 * 示例 * 适用场景 * 二、POST 请求 * 特点 * 示例 * 适用场景 * 三、PUT 请求 * 特点 * 示例 * 四、PATCH 请求 * 特点 * 五、DELETE 请求 * 特点 * 六、GET 与 POST 核心区别总结 * 使用步骤 * 一、在 Axios 中的标准写法 * 统一写法(推荐) * 二、什么时候用 GET?