Bolt.new 入门：搭建你的第一个网页应用
# Bolt.new 入门指南：构建您的第一个 Web 应用
我还记得第一次接触 Bolt.new 时的情景——我怀疑一个 AI 驱动的开发环境能否真正取代我的传统工作流程。在用 Bolt.new 构建了三个生产级应用后，我可以告诉您，这并非夸大其词。让我带您从零开始创建第一个 Web 应用，分享我使用的确切步骤以及犯过的错误，这样您就不必重蹈覆辙。
## 前提条件
在开始之前，请确保您已具备：
- **一个现代网络浏览器**（Chrome、Firefox 或 Edge——我使用 Chrome）
- **一个 GitHub 账户**（免费版完全够用）
- **Bolt.new 账户**（在 [bolt.new](https://bolt.new) 注册）
- **对 Web 开发的基本了解**（HTML、CSS、JavaScript 基础知识）
- **已安装 Node.js**（可选，但对本地测试有帮助）
> **警告：** 不要跳过连接 GitHub 的步骤。我因为忘记连接仓库而丢失了三个小时的工作，吃尽了苦头。在开始项目前，务必连接您的 GitHub 账户。
## 第 1 步：创建 Bolt.new 账户并连接 GitHub
前往 [bolt.new](https://bolt.new) 并点击“注册”。我用 Google 账户快速登录，但使用电子邮件也可以。
1. 点击右上角的“注册”
2. 选择您的身份验证方式（我推荐 Google/GitHub OAuth）
3. 完成入门向导——大约需要 2 分钟
4. 导航至设置 → 集成 → GitHub
5. 点击“连接 GitHub”并授权应用程序
6. 确认连接状态显示为“已连接”并带有绿色对勾
**专业提示：** 在设置中启用“自动保存到 GitHub”。当我的浏览器在会话中途崩溃时，这救了我一命。
## 第 2 步：开始一个新项目
现在让我们创建您的第一个项目。我将构建一个简单的任务管理器应用，以展示 Bolt.new 的核心功能。
1. 在仪表板上，点击“新建项目”
2. 从模板选项中选择“Web 应用程序”
3. 为您的项目命名：`TaskMaster-App`
4. 选择“React + Vite”作为您的框架（它快速且现代）
5. 点击“创建项目”
```bash
# Bolt.new 自动生成此结构：
taskmaster-app/
├── src/
│ ├── App.jsx
│ ├── App.css
│ ├── main.jsx
│ └── index.css
├── public/
│ └── vite.svg
├── package.json
├── vite.config.js
└── index.html
```
## 第 3 步：编写您的第一个提示
这是 Bolt.new 的闪光点。您不需要逐行编写代码，而是描述您想要的内容。以下是我为任务管理器编写的精确提示：
```
创建一个任务管理应用，包含：
- 一个标题为“TaskMaster”的头部
- 一个用于添加新任务的输入字段
- 一个显示所有任务并带有复选框的列表
- 每个任务都有编辑和删除按钮
- 任务可以标记为完成（删除线文本）
- 本地存储持久化
- 干净、现代的 UI，采用蓝色配色方案
- 响应式设计，适用于移动端和桌面端
```
1. 将此提示输入或粘贴到聊天界面中
2. 等待 10-15 秒，Bolt.new 生成代码
3. 在预览窗格中查看生成的代码
4. 如果看起来不错，点击“接受”
> **警告：** 您的第一个提示可能会生成不完美的代码。这很正常！我发现，对 UI 元素和功能进行具体描述会得到更好的结果。如果第一个版本不符合您的设想，请不要接受。
## 第 4 步：自定义生成的代码
在 Bolt.new 生成初始代码后，我总会自定义一些内容。以下是我所做的修改：
```jsx
// 原始生成的代码（简化版）
function App() {
const [tasks, setTasks] = useState([]);
// ... 其余代码
}
// 我修改后的版本，增加了额外功能
function App() {
const [tasks, setTasks] = useState(() => {
const savedTasks = localStorage.getItem('tasks');
return savedTasks ? JSON.parse(savedTas