AI IDE（Trae）使用图文教程，小白也能秒上手

在人工智能快速发展的今天，越来越多的开发者希望快速上手AI项目，但复杂的环境配置、繁琐的代码调试常常让人望而却步。为此，Trae AI IDE 应运而生——一款专为AI开发打造的智能集成开发环境，集代码编写、模型训练、实时调试与云端部署于一体，极大降低了AI开发门槛。

无论你是编程新手，还是刚接触AI领域的爱好者，本文都将通过详细的图文步骤，带你一步步掌握 Trae AI IDE 的核心功能。从注册登录、界面介绍到项目创建与运行，全程零基础友好，真正做到“小白也能秒上手”。准备好开启你的智能开发之旅了吗？让我们马上开始！

一、安装下载

去到 https://www.trae.ai/ 官网，点击Download下载

到本地安装的时候，会提示是否要导入配置，这里可以选择

• 从VS Code导入

• 从Cursor导入

接着可以选择安装Trae命令

然后可以选择跳过或者登录账号

首次使用这个平台的话，可以注册账号并登录，登录成功之后可以看到下面这个界面的提示

在这里可以更改这个配置的语言，一般默认的是中文，但一般开发都习惯于用英文。

二、功能区

主要分为四大块区域：

• 最左边的侧边栏:

• Explorer 选择文件

• Search 搜索

• Git git仓库

• WebView 网页预览

• Debug 调试代码

• Extension Store 插件市场

• 第二块区域的文件区

  显示所有的文件层次结构

• 最中间最大的代码编辑区

• 最右侧的AI 交互提问区

• Builder 模式：只需要告诉 AI 你想要什么样的应用，它会轻松完成从零到一的项目构建

• Chat 模式：AI 将理解当前代码，你可以随时提出问题、寻求建议。此外也支持编辑器内实时提供建议代码

三、编辑工程代码

这里以前端工程代码为例，打开一个React工程代码，首次打开的时候会需要选择信任这个作者

3.1 提示运行前端工程代码

首先运行这个工程代码，直接在Chat模式里输入

帮忙运行这个React 项目

然后就可以看到输出如下信息所示，提示要

npm install

npm start

由于这个项目用的是vite构建工具，所以一开始提示的用npm start启动会报错，于是继续提示

这里运行的构建工具是vite，用npm start启动会报错

然后点击这个Open WebView，就会在WebView这里打开一个窗口，运行端口，这里就可以看到页面的预览效果了。

3.2 改造样式

比如想要改造上述按钮的颜色为蓝色，则在Builder模式下去输入

修改这个count is 0按钮的背景色为蓝色

然后就可以看到输出的内容和修改的文件

在修改的文件那里会看到提示”更改已经成功被应用了，请确认“，可以点击

• Reject 拒绝

• Accept 同意

在未点击确认之前，这里新增代码的背景色会是绿色。

点击Accpet之后，再次运行可以看到下面按钮的背景色已经变成了蓝色。

3.3 增加交互

比如想要在点击这个按钮之后，增加一个dialog的弹窗提示，输入这样的命令，可以看到提示修改的代码

其中，点击对应要修改的提示代码文件的Review，就可以跳转去对应的文件

可以看到

• 要删除的代码，未确认之前是红色背景

• 要新增的代码，未确认之前是绿色背景

点击Accept之后，再次运行，看到效果如下所示：

点击这个按钮，确实新增了一个弹窗组件，并提示对应的信息。

四、一些使用技巧和细节

如果想要复制自己上次输入的整个上下文信息，则需要点击左边这三个点，选择Copy

总结

通过本篇图文教程，相信你已经对 Trae AI IDE 的基本使用有了全面了解。我们从界面布局讲起，逐步完成了项目创建、代码编辑、模型运行与结果查看等关键操作，每一步都配有清晰截图和说明，确保每一位读者都能轻松跟练。

Trae AI IDE 不仅功能强大，而且操作直观，特别适合初学者快速验证想法、构建原型。更重要的是，它将复杂的AI开发流程简化为几个点击动作，真正实现了“让创意落地，无需被技术绊脚”。

现在，你已经掌握了打开AI世界大门的钥匙。下一步，不妨尝试创建自己的第一个AI项目，探索更多高级功能。记住：每一个专家，都曾是像你一样的小白。勇敢动手，未来已来！