当前位置：首页 > news >正文

新手小白实战教程：用 TRAE 从零创建一个“个人日记本”网页应用

news 2026/4/16 18:26:16

本教程将带你手把手、一步步，使用 TRAE 完成你的第一个小项目。我们会像搭积木一样，从创建一个空文件夹开始，直到做出一个能运行、能记日记的简单网页。请严格按顺序操作，不要跳步。

第一步：项目启动与规划 (5分钟)

目标：告诉 TRAE 我们想做什么，让它帮我们搭建项目骨架。

打开 TRAE：双击桌面图标启动 TRAE。
创建空项目文件夹：
- 在电脑桌面（或其他你找得到的地方）右键 -> 新建 -> 文件夹。
- 将文件夹命名为my-diary-app（名字可以自己取，但不要用中文）。
在 TRAE 中打开这个文件夹：
- 在 TRAE 顶部菜单栏，点击File（文件） ->Open Folder...（打开文件夹）。
- 在弹出的窗口中，找到并选中你刚创建的my-diary-app文件夹，点击选择文件夹。
- 现在，TRAE 左侧的资源管理器（Explorer）区域应该显示MY-DIARY-APP，下面空空如也。
召唤 AI，描述需求：
- 点击 TRAE 左侧活动栏的TRAE AI图标（一个星星标志）。
- 右侧会弹出 AI 侧边栏。找到并点击Builder标签页。
- 在底部的大输入框里，一字一句地输入以下内容（你可以复制粘贴）：
  “请帮我创建一个简单的个人日记本网页应用。要求：
  1. 使用 HTML, CSS 和纯 JavaScript 编写，不需要复杂框架，因为我是新手。
  2. 网页有一个好看的标题‘我的日记本’。
  3. 有一个输入框可以写日记内容，一个按钮点击后能保存日记。
  4. 保存的日记能显示在网页下方，最新的日记显示在最上面。
  5. 日记数据保存在浏览器的本地存储里，这样刷新页面日记也不会消失。
    请为我生成所有必要的文件。”
- 按下回车键发送。
与 AI 对话，确认细节：
- AI 可能会问你一两个问题来澄清，比如确认技术栈。你只需回答“是的”或按照它的提示选择最简单选项。
- 很快，AI 的Builder模式就会开始工作，自动在左侧资源管理器里创建文件和文件夹，并往里面写代码。你会看到文件列表在自动增加，这非常酷！

第二步：认识生成的项目文件 (5分钟)

AI 工作完成后，你的资源管理器看起来应该像这样：

MY-DIARY-APP (项目根目录) ├── index.html (网页的主入口文件，就像书的封面和目录) ├── style.css (网页的样式文件，控制颜色、字体、布局等外观) └── script.js (网页的交互逻辑文件，控制按钮点击、保存等行为)

我们来认识一下它们（你不需要现在理解代码，先知道它们是干嘛的）：

index.html：双击它，它会在中间编辑器区域打开。里面是网页的“骨架”，比如标题、输入框、按钮这些元素都在这里定义。你可以把它想象成房子的承重墙和房间格局。
style.css：双击打开。里面定义了网页的“装修风格”，比如背景色是什么，标题多大，按钮什么颜色。它让房子变得好看。
script.js：双击打开。里面是网页的“智能家居系统”，比如你点击“保存”按钮后会发生什么，日记怎么存、怎么读。它让房子变得“聪明”，能互动。

第三步：运行并查看你的网页 (3分钟)

现在，让我们看看 AI 为我们生成的网页长什么样。

在 TRAE 中运行：
- 确保index.html文件在编辑器中是打开的状态。
- 在index.html文件标签页上右键。
- 在弹出的菜单中，找到并选择Open with Live Server或在默认浏览器中打开类似的选项。
  - 如果没找到这个选项，你可能需要先安装一个叫 “Live Server” 的小插件。别怕，很简单：点击左侧活动栏的扩展图标（四个小方块），搜索“Live Server”，找到它并点击“安装”。安装完再重复右键操作。
见证奇迹：
- 你的默认浏览器（比如 Chrome、Edge）会自动打开一个新标签页，显示的就是你的“个人日记本”应用了！
- 你应该能看到一个带有标题、输入框和按钮的页面。虽然可能不太漂亮，但功能俱全。

第四步：修改与个性化你的应用 (15分钟)

现在，我们来当一回“设计师”和“产品经理”，用 TRAE 的 AI 对话功能来修改这个应用。

场景一：让网页标题更有个性

定位代码：在 TRAE 中，打开index.html文件。
使用 AI 提问：
- 找到显示“我的日记本”的那行代码（通常在<h1>标签里）。
- 选中“我的日记本”这几个字。
- 在选中区域右键，选择向 AI 提问。
- 在右侧弹出的 AI 对话面板中，输入：“我想把标题改成‘[你的名字]的私密日记本’，并且把颜色改成深蓝色，字体稍微大一点。请直接帮我修改这行代码。”
- 按下回车。
应用修改：
- AI 会给出修改后的代码建议。仔细阅读，确认它理解了你的意思（比如颜色代码可能是#1a237e这样的）。
- 如果没问题，点击 AI 回复框中的应用或替换按钮。你会立刻看到index.html文件中的标题文字和样式代码被自动更新了。
查看效果：回到浏览器，刷新页面（按 F5 键），看看标题是不是变了。

场景二：为保存按钮添加一个提示动画

我们觉得点击“保存”按钮后，最好有个提示，让用户知道保存成功了。

描述需求：
- 这次我们不选中代码，直接点击右侧 AI 对话面板（确保它开着）。
- 输入：“我想在script.js文件里，当用户点击保存按钮后，除了保存日记，还能弹出一个小的提示框，显示‘日记保存成功！’，2秒后自动消失。请帮我修改script.js文件中的保存函数。”
审查并应用：
- AI 会分析现有的script.js代码，并给出修改后的完整函数或代码块。
- 它会清晰地告诉你它修改了哪里。你阅读理解后，点击应用。
测试功能：
- 回到浏览器页面。
- 在输入框里写点文字，比如“今天学会了用 TRAE 做网页，太酷了！”
- 点击“保存”按钮。观察是否出现了“日记保存成功！”的提示（可能在页面顶部或底部），并且2秒后消失。
- 同时，检查你写的日记是否出现在了下方的日记列表中。

场景三：让日记列表的样式更清晰

我们发现日记一条条堆在一起，有点乱，想给每条日记加个边框和背景色。

精准提问：
- 在 AI 对话面板输入：“在style.css文件中，我想为每一条显示的日记条目（<div>）添加一个浅灰色的背景（#f5f5f5）、一个灰色的细边框（1px solid #ddd）、以及一些内边距（padding: 10px），并且让每条日记之间有一些间距（margin-bottom: 10px）。请直接帮我修改style.css文件。”
应用并刷新：
- 应用 AI 的修改后，保存style.css文件（按Ctrl+S）。
- 回到浏览器刷新页面。看看已有的日记条目是不是立刻变好看了，有了卡片一样的效果。

第五步：调试与解决问题 (5分钟)

如果某一步出错怎么办？别慌，这正是 TRAE 最擅长帮忙的地方。

情况一：代码有红色波浪线（语法错误）
- 把鼠标放在波浪线上，会看到错误信息。
- 选中出错的那一行或附近几行代码，右键选择向 AI 提问，输入：“这段代码报错了，错误信息是XXX，请问如何修复？”
情况二：浏览器按 F12 打开开发者工具，看到 Console（控制台）有红色报错
- 复制这个错误信息。
- 在 TRAE 的 AI 对话面板里粘贴，并提问：“我的网页在浏览器控制台报错：[粘贴错误信息]。问题可能出在哪里？如何修复？”
情况三：功能没实现（比如点击保存没反应）
- 在 AI 对话面板描述现象：“我的日记本网页，点击保存按钮后，日记没有显示在列表里。请帮我检查script.js文件中的saveDiary函数可能有什么问题。”
- AI 会引导你一步步检查，或者直接给出修正后的代码。