Trae 极简操作教程：小白入门创建教学工具 一、Trae 简介 Trae 是字节跳动推出的一款功能强大的 AI 原生集成开发环境（AI IDE）。它将 AI 能力深度融入整个开发流程，带来 “人与 AI 协同编程” 的全新体验。对于我们小学科学教师而言，利用 Trae 可以轻松创建各种教学工具，如互动式课件、科学实验模拟小程序等，让课堂变得更加生动有趣。其具有以下显著特点： 强大的 AI 支持：集成先进 AI 模型，像 doubao-1.5-pro、DeepSeek R1&V3 等。通过自然语言描述需求，就能快速生成代码，比如你想创建一个太阳系行星介绍的互动页面，只需告诉 Trae 你的想法，它就能帮你生成相关代码框架。 操作简便：无需深厚编程基础，简单几步操作，就能开启项目创建。即使你之前从未接触过编程，也能快速上手。 应用场景丰富：能开发多种类型教学工具，包括网页应用、小程序等。无论是制作线上科学知识测试页面，还是开发一个模拟电路实验的小程序，Trae 都能满足需求。 二、准备工作 设备要求： 操作系统：Windows 10 及以上版本、macOS 10.15 及以上版本。 硬件：至少 4GB 运行内存，建议 8GB 及以上；硬盘空间至少预留 500MB 用于安装 Trae 及相关项目文件。 软件准备： 浏览器：推荐使用 Chrome 或 Firefox 最新版本，确保良好兼容性和性能。 Trae 安装包：访问 Trae 中国官网（https://www.trae.com.cn）下载。国内用户强烈建议点击【国内镜像】加速下载。根据自己的操作系统选择对应版本，Windows 用户下载 “trae-win-x64.zip”，macOS 用户下载 “trae-mac-darwin.zip”，Linux 用户下载 “trae-linux-amd64.tar.gz” 。 三、安装 Trae Windows 系统安装步骤： 下载完成后，找到下载的 “trae-win-x64.zip” 压缩包，右键点击它，选择【解压到 trae】。 解压完成后，进入解压后的文件夹，找到 “trae-cli” 文件夹。 以管理员权限打开 Windows PowerShell（在开始菜单中找到 PowerShell，右键选择【以管理员身份运行】）。 在 PowerShell 中，使用 “cd” 命令切换到 “trae-win-x64” 文件夹所在路径，例如 “cd C:\Users\ 你的用户名 \Downloads\trae-win-x64” 。 输入 “npm install -g trae-cli” 并回车，等待安装完成。这一步是安装 Trae 的命令行工具，方便后续操作。 macOS 系统安装步骤： 下载完成后，双击 “trae-mac-darwin.zip” 文件，系统会自动解压。 将解压后的 Trae 应用程序拖动到 “Applications” 文件夹中。 打开终端，输入 “cd trae-mac-darwin”（假设解压后的文件夹在当前用户根目录下）。 输入 “npm install -g trae-cli” 并回车，等待安装完成。 四、首次启动与配置 安装完成后，找到 Trae 启动图标并打开（Windows 系统可在开始菜单中找到，macOS 系统在 “Applications” 文件夹中）。 首次启动时，会出现语言选择界面，选择 “简体中文”。接着选择喜欢的主题（如暗色、亮色、深蓝），点击 “继续”。 如果你电脑中已安装并配置了 VS Code 或 Cursor，可以选择从 VS Code 或 Cursor 中导入配置，这样能快速将插件、IDE 设置、快捷键设置等信息一键导入到 Trae 中，方便从其他 IDE 切换到 Trae。若没有相关配置，直接点击 “跳过” 即可。 为了更高效使用 Trae，建议添加 Trae 命令行工具。点击 “安装 trae 命令” 按钮，并完成授权流程。添加后，可通过 “trae” 命令快速唤起 Trae，使用 “trae my - react - app” 命令在 Trae 中打开一个项目。 为了使用 Trae 的 AI 功能，需要登录账号。Trae 提供了邮箱登录、Google 账号登录、Github 账号登录三种方式。若没有账号，可选择注册一个新账号。登录成功后，即可进入 Trae 主界面。 五、Trae 界面介绍 Trae 主界面主要分为四个区域： 资源管理器（左侧）：以树状结构展示项目文件结构，方便查看、管理项目中的各类文件，如 HTML 文件、Python 脚本文件等。通过它可以新建文件、文件夹，对文件进行重命名、删除等操作。 编辑器区域（中部）：这是编写和查看代码的主要区域。当在资源管理器中双击打开某个文件时，该文件内容就会在编辑器区域显示，供我们编辑修改。 AI 交互面板（右侧）：与 AI 进行对话和接收 AI 建议的地方。在不同模式下，我们在此输入需求，AI 会根据输入生成代码、解答问题等。 状态栏（底部）：显示当前状态和一些快捷操作。比如显示项目运行状态、当前使用的 AI 模型等信息，还提供了一些快速访问常用功能的按钮。 六、核心功能键介绍 Ctrl + I（Windows）/Cmd + I（Mac）：打开 AI 对话窗口（Builder 模式）。在 Builder 模式下，我们可以用自然语言描述想要创建的项目或功能，如 “创建一个小学科学实验报告填写的网页表单”，Trae 会根据描述生成相关代码。 Ctrl + L（Windows）/Cmd + L（Mac）：打开新的 AI 聊天窗口（Chat 模式）。Chat 模式适合询问编程问题、获取代码解释等，例如 “Python 中 for 循环的用法是什么”。 Tab 键：接受 AI 代码建议。当 AI 生成代码建议后，按下 Tab 键，代码建议就会自动应用到编辑器区域的代码中。 Ctrl + Enter（Windows）/Cmd + Enter（Mac）：执行当前 AI 生成的代码片段。如果生成的代码是一个可独立运行的代码片段，比如一个函数调用，按下此组合键可执行该代码片段。 Ctrl + Shift + P（Windows）/Cmd + Shift + P（Mac）：打开命令面板。通过命令面板可以快速执行各种命令，如运行项目、打开特定文件等。 七、两种 AI 编程模式详解 Chat 模式： 交互方式：类似日常聊天对话。在右侧 AI 交互面板的 Chat 模式窗口中输入问题或需求，Trae 会以文本形式回复解答或建议。 适用场景：适合解决编程过程中遇到的各种问题。例如在创建教学工具时，遇到代码报错，将错误信息复制到 Chat 模式窗口，询问 Trae 如何解决；或者想了解某个编程概念，如 “什么是 JavaScript 中的变量作用域”，都能得到详细解答。 示例操作：假设在编写一个科学小游戏的 JavaScript 代码时，不确定如何实现游戏角色的移动功能，在 Chat 模式窗口中输入 “在 JavaScript 中如何实现一个游戏角色在页面中按方向键移动的功能”，Trae 会给出相关代码示例及解释。 Builder 模式： 交互方式：通过自然语言描述项目或功能需求，Trae 会自动生成代码、创建文件，构建完整项目结构。在 AI 交互面板的 Builder 模式窗口中输入需求描述，如 “创建一个包含太阳系八大行星信息展示的网页项目，每个行星信息包括图片、名称、基本介绍” 。 适用场景：非常适合从无到有创建教学工具项目。无论是开发一个线上科学课程学习平台的基础框架，还是制作一个简单的科学知识问答小程序，都可以使用 Builder 模式快速生成初始代码和项目结构。 示例操作：想要创建一个用于展示植物生长周期的互动式网页，在 Builder 模式窗口输入 “创建一个展示植物生长周期的网页，每个阶段有图片和文字描述，并且能通过点击按钮切换阶段”，Trae 会按照需求生成相应的 HTML、CSS 和 JavaScript 代码，创建好项目文件结构，我们只需在此基础上进行微调即可。 八、创建第一个教学工具项目 下面以创建一个简单的 “小学科学知识问答网页” 为例，演示使用 Trae 创建教学工具的过程。 初始化新项目： 打开 Trae 后，确保处于主界面。 按下 “Ctrl + Shift + P”（Windows）/“Cmd + Shift + P”（Mac）组合键打开命令面板，在命令面板中输入 “trae init”，然后选择 “trae init my - first - project”（这里 “my - first - project” 是项目名称，可根据自己喜好修改），按下回车键。 此时会弹出模板类型选择框，选择 “1. 通用 Web 项目”。这一步是初始化一个基于 Web 的项目，适合创建我们的科学知识问答网页。 进入项目目录： 初始化完成后，在命令行（或 Trae 内置的终端）中输入 “cd my - first - project”，回车。这一步是进入刚刚创建的项目文件夹，后续对项目的操作都在这个文件夹内进行。 安装依赖： 在项目目录下的命令行中输入 “npm install”，回车。这一步是安装项目运行所需要的各种依赖包，比如一些用于网页样式、交互功能的 JavaScript 库等。等待安装完成，这个过程可能需要一些时间，具体时长取决于网络速度和依赖包数量。 使用 Builder 模式生成问答网页核心代码： 按下 “Ctrl + I”（Windows）/“Cmd + I”（Mac）组合键打开 AI 对话窗口（Builder 模式）。 在 Builder 模式窗口中输入 “创建一个小学科学知识问答网页，问题和答案预先设置好，点击答案能显示是否正确，页面要有简单美观的样式”。 Trae 会开始解析需求，并生成相关代码。生成过程中可能会弹出一些提示询问细节，比如问题和答案的具体内容，按照需求输入即可。例如，可能会提示 “请输入第一个问题”，我们输入 “地球是什么形状的？”，接着提示 “请输入答案”，输入 “球体”。 生成完成后，在资源管理器中可以看到生成了一系列文件，如 HTML 文件用于网页结构、CSS 文件用于样式设置、JavaScript 文件用于实现交互功能。编辑器区域也会自动打开相关文件显示生成的代码。 修改完善代码（以修改问题和答案为例）： 在资源管理器中找到存储问题和答案的 JavaScript 文件（通常根据生成代码的注释能找到），双击打开。 假设要修改第二个问题，找到对应的代码部分，将问题和答案修改为我们需要的科学知识内容。比如将原问题 “太阳从哪里升起？” 修改为 “声音的传播需要什么？”，答案 “东方” 修改为 “介质”。 运行项目： 确保处于项目目录下的命令行中，输入 “trae start”，回车。 成功启动后，会看到输出 “Server is running at http://localhost:8080” 。 打开浏览器，输入 “http://localhost:8080”，即可看到我们创建的小学科学知识问答网页。可以在网页上进行问答操作，测试功能是否正常。 九、常见问题及解决方法 启动时报错 “权限不足”： Windows 系统：右键点击 CMD（命令提示符），选择【以管理员身份运行】，然后再次尝试启动 Trae 相关命令。 macOS/Linux 系统：在启动命令前加上 “sudo”，例如 “sudo trae start”，输入管理员密码后回车执行。但使用 “sudo” 要谨慎，确保操作的安全性。 访问页面空白： 检查防火墙设置：查看防火墙是否阻止了 Trae 项目运行所需的 8080 端口。如果是，将 8080 端口添加到防火墙允许访问的列表中。不同防火墙设置方法不同，一般在防火墙软件的设置选项中找到端口设置相关部分进行操作。 确认浏览器模式：确保浏览器没有开启隐私模式，某些隐私模式可能会限制网页正常加载。关闭隐私模式后重新访问页面。 依赖安装失败： 尝试更换 npm 源：在命令行中输入 “npm config set registry https://registry.npm.taobao.org”，将 npm 源更换为淘宝镜像源，这在国内网络环境下可能会提高依赖安装成功率。然后再次执行 “npm install” 命令安装依赖。