Bolt.new 入门指南：构建您的第一个 Web 应用

我还记得第一次接触 Bolt.new 时的情景——我怀疑一个 AI 驱动的开发环境能否真正取代我的传统工作流程。在用 Bolt.new 构建了三个生产级应用后，我可以告诉您，这并非夸大其词。让我带您从零开始创建第一个 Web 应用，分享我使用的确切步骤以及犯过的错误，这样您就不必重蹈覆辙。

前提条件

在开始之前，请确保您已具备：

一个现代网络浏览器（Chrome、Firefox 或 Edge——我使用 Chrome）
一个 GitHub 账户（免费版完全够用）
Bolt.new 账户（在 bolt.new 注册）
对 Web 开发的基本了解（HTML、CSS、JavaScript 基础知识）
已安装 Node.js（可选，但对本地测试有帮助）

警告： 不要跳过连接 GitHub 的步骤。我因为忘记连接仓库而丢失了三个小时的工作，吃尽了苦头。在开始项目前，务必连接您的 GitHub 账户。

第 1 步：创建 Bolt.new 账户并连接 GitHub

前往 bolt.new 并点击“注册”。我用 Google 账户快速登录，但使用电子邮件也可以。

点击右上角的“注册”
选择您的身份验证方式（我推荐 Google/GitHub OAuth）
完成入门向导——大约需要 2 分钟
导航至设置 → 集成 → GitHub
点击“连接 GitHub”并授权应用程序
确认连接状态显示为“已连接”并带有绿色对勾

第 1 步：将 GitHub 账户连接到 Bolt.new

专业提示： 在设置中启用“自动保存到 GitHub”。当我的浏览器在会话中途崩溃时，这救了我一命。

第 2 步：开始一个新项目

现在让我们创建您的第一个项目。我将构建一个简单的任务管理器应用，以展示 Bolt.new 的核心功能。

在仪表板上，点击“新建项目”
从模板选项中选择“Web 应用程序”
为您的项目命名：TaskMaster-App
选择“React + Vite”作为您的框架（它快速且现代）
点击“创建项目”

# Bolt.new 自动生成此结构：
taskmaster-app/
├── src/
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css
├── public/
│   └── vite.svg
├── package.json
├── vite.config.js
└── index.html

第 2 步：新项目创建界面

第 3 步：编写您的第一个提示

这是 Bolt.new 的闪光点。您不需要逐行编写代码，而是描述您想要的内容。以下是我为任务管理器编写的精确提示：

创建一个任务管理应用，包含：
- 一个标题为“TaskMaster”的头部
- 一个用于添加新任务的输入字段
- 一个显示所有任务并带有复选框的列表
- 每个任务都有编辑和删除按钮
- 任务可以标记为完成（删除线文本）
- 本地存储持久化
- 干净、现代的 UI，采用蓝色配色方案
- 响应式设计，适用于移动端和桌面端

将此提示输入或粘贴到聊天界面中
等待 10-15 秒，Bolt.new 生成代码
在预览窗格中查看生成的代码
如果看起来不错，点击“接受”

警告： 您的第一个提示可能会生成不完美的代码。这很正常！我发现，对 UI 元素和功能进行具体描述会得到更好的结果。如果第一个版本不符合您的设想，请不要接受。

第 4 步：自定义生成的代码

在 Bolt.new 生成初始代码后，我总会自定义一些内容。以下是我所做的修改：

// 原始生成的代码（简化版）
function App() {
  const [tasks, setTasks] = useState([]);
  // ... 其余代码
}

// 我修改后的版本，增加了额外功能
function App() {
  const [tasks, setTasks] = useState(() => {
    const savedTasks = localStorage.getItem('tasks');
    return savedTasks ? JSON.parse(savedTas

Bolt.new 入门：搭建你的第一个网页应用