Bolt.new 第一个应用
Bolt.new 是一个在浏览器中运行的 AI 全栈开发平台。它不仅能写代码，还能实时安装依赖、运行服务器并预览应用。
#1. 开启你的第一个项目
访问 bolt.new↗，你会看到一个极其简洁的界面。
#步骤 A：描述你的需求
在中间的输入框中，用自然语言描述你想构建的应用。
示例提示词： "创建一个现代化的 Todo List 应用，使用 React, Tailwind CSS 和 Lucide 图标。支持任务分类、截止日期提醒，并能将数据保存到本地存储。"
#步骤 B：观察生成过程
Bolt 会自动执行以下操作：
- 初始化环境：配置 WebContainer（在浏览器中运行 Node.js）。
- 创建文件：生成
package.json,tailwind.config.js,App.tsx等。 - 安装依赖：自动运行
npm install。 - 启动开发服务器：运行
npm run dev。
#2. 实时预览与调试
在右侧面板，你会看到应用的实时预览界面。
- 热更新 (HMR)：你在左侧 Prompt 框中要求修改代码，右侧预览会瞬间更新。
- 控制台 (Terminal)：点击底部的 Terminal 标签，可以看到 Node.js 的运行日志，就像在本地 VS Code 中一样。
#3. 协作式开发
你可以不断通过对话来完善你的应用：
- 添加功能："给任务添加拖拽排序功能。"
- 修复 Bug："修复点击删除按钮时没有弹窗确认的问题。"
- 调整 UI："将整体配色改为深色模式，并将按钮圆角加大。"
#4. Bolt.new 的独特优势
| 特性 | 传统 AI 编程 (如 ChatGPT) | Bolt.new |
|---|---|---|
| 代码生成 | 仅提供代码片段 | 生成完整项目结构 |
| 环境配置 | 需要用户本地配置环境 | 零配置，浏览器即开发环境 |
| 实时预览 | 无 | 内置预览窗口 |
| 依赖管理 | 用户手动安装 | AI 自动管理并运行 |
#5. 常见问题
- 它使用的是什么模型？ 默认使用 Claude 3.5 Sonnet，这是目前编程能力最强的模型之一。
- 我可以导出代码吗？ 点击右上角的 "Download" 按钮，可以将整个项目下载为 ZIP 包，然后在本地 VS Code 中继续开发。
下一步建议：尝试在 Prompt 中指定特定的技术栈，例如 "使用 Next.js App Router 构建"，你会发现 Bolt.new 对主流框架的支持非常出色。
