本文将介绍如何使用 Bolt.new 快速生成一个 Todo 应用，技术栈包括：
- 前端：Vue 3 + Tailwind CSS
- 后端：Supabase（用于数据存储和用户认证）
在现代 web 开发中，如何快速搭建一个功能完整的应用是许多开发者关注的重点。Bolt.new 是一个强大的 AI 驱动的在线开发工具，能够帮助开发者通过简单的提示生成全栈应用代码，无需复杂的本地环境配置。
通过这个项目，你可以快速实现用户认证、任务的增删改查等功能，体验 AI 辅助开发的高效与便捷。
1. 什么是 Bolt.new？
Bolt.new 是由 StackBlitz 开发的一个在线开发平台，结合了 AI 代码生成和浏览器内开发环境。开发者可以通过自然语言提示（prompt）描述需求，Bolt.new 会自动生成对应的代码和项目结构。它支持多种框架和库（如 Vue、React、Next.js），并且允许开发者直接在浏览器中运行、编辑和部署代码。
Bolt.new 的特点：
- AI 驱动的代码生成：通过简单的提示生成完整项目。
- 浏览器内开发环境：无需本地安装，直接运行和测试代码。
- 支持全栈开发：可以集成前端框架和后端服务。
- 快速部署：支持一键部署到 Netlify 或 Cloudflare。
要体验一款这样的AI应用，拿Todo App做测试是再合适不过的了。它包含了数据的增删改查、用户的登录认证，也要求提供美观易用的前端界面。
打开bolt.new/ ，在提示框中输入“Create a Vue Todo App, need a beautiful UI and mobile friendly, support user auth“。 随后Bolt便开始生成项目的基本代码，前端使用了Vue 3 + Tailwind CSS, 认证服务选择了Supabase。
2. 技术栈简介
2.1 Vue 3
Vue 是一个流行的前端框架，以其简洁的语法和强大的生态系统著称。Vue 3 引入了 Composition API，使得组件逻辑更加清晰和可复用。在本项目中，Vue 3 用于构建动态的 Todo 列表和用户界面。
2.2 Tailwind CSS
Tailwind CSS 是一个功能强大的 CSS 框架，采用实用优先（utility-first）的方式，帮助开发者快速构建自定义的 UI。通过直接在 HTML 元素上添加类名，可以轻松实现响应式设计和主题定制。
2.3 Supabase
Supabase 是一个开源的后端即服务（BaaS）平台，提供数据库、用户认证和实时功能。它与 PostgreSQL 兼容，支持 RESTful API 和 WebSocket。本项目使用 Supabase 实现用户认证（邮箱/密码登录）和任务数据的存储。
Bolt页面右上角有一个Supabase按钮，点击即可实现对接。
2.4 配置 Supabase
- 创建 Supabase 项目：在 Supabase 官网创建一个新项目，获取 API URL 和 Anon Key。
- 设置数据库：创建一个 todos 表，包含任务内容、用户 ID 和完成状态等字段。
- 配置认证：启用邮箱/密码认证，并在 Bolt.new 生成的项目中配置 Supabase 客户端。
这一套流程下来，一行代码没写，生成的项目可以直接在浏览器中运行，并支持实时预览。
3. 部署应用
Bolt.new 支持一键部署功能，你可以将生成的应用直接部署到 Netlify 或 Cloudflare。部署过程无需复杂配置，只需点击界面中的部署按钮即可。
我已经将它部署到 2dou.netlify.app/ 感兴趣的朋友可以打开看看(目前仅做演示用)。可以新注册邮箱，或者使用测试账号：Email: test@example.com Password: 123456
4. 与Cursor对比
Cursor是一款基于VSCode扩展的本地Editor, 提供了更友好的AI编程体验。但使用过程中它需要开发者先生成项目的基本框架，比如使用create-vite脚手架，而Bolt则可以根据用户输入为我们生成项目文件、选择合适的解决方案，在这一点它更适合初学者；而且它可以监测项目运行结果，如果右侧预览区项目报错了，那么它会发现并尝试解决，这是一个亮点。
通过这一次使用，个人也学到了Supabase的基本使用，对于个人或小团队，可以快速实现数据存储和用户认证的功能，节省了不少开发成本。而且有了Netlify和Vercel这样的平台，我们几乎可以零成本的上线个人应用，对于前期推广也是很好的。
如果你想快速验证创意或学习新的技术栈，不妨试试 Bolt.new。未来，随着 AI 技术的进一步发展，类似的工具可能会彻底改变我们的开发流程。
