Lovable（lovable.dev）是 2025 年最受关注的 AI 全栈开发工具之一。和 Cursor 专注 IDE 内补全不同，Lovable 走的是「对话即开发」路线：你描述需求，它生成 React + Supabase + Tailwind 的完整代码，改完直接部署到线上。本教程用一个「活动报名系统」演示完整流程——从需求描述到上线可访问，全程不超过 30 分钟。

Lovable vs 其他 AI 开发工具

  • vs Cursor：Cursor 是 IDE 插件，适合已有项目迭代；Lovable 从零开始，适合 MVP 快速验证
  • vs Bolt.new：Bolt 侧重前端，Lovable 自带后端（Supabase 集成），能做有数据库的完整应用
  • vs v0：v0 生成 UI 组件，Lovable 生成完整应用（含路由、数据库、认证、部署）
  • 技术栈：React + TypeScript + Tailwind + shadcn/ui + Supabase（PostgreSQL + Auth + Storage）

第一步：创建项目并描述需求

  1. 注册 lovable.dev（用 GitHub 账号登录，免费版每天 5 条消息）
  2. 点击 New Project → 选择 Blank 或从模板开始
  3. 在对话框输入需求描述

需求描述是 Lovable 成功的关键。一个好的描述应该包含：功能清单、页面结构、数据模型、交互行为。

创建一个活动报名系统。

功能：
1. 首页展示活动列表（卡片式），每个活动显示标题、时间、地点、已报名人数
2. 点击活动进入详情页，显示完整介绍和报名表单（姓名、手机、邮箱）
3. 用户提交报名后显示成功页面，活动已报名人数 +1
4. 管理员可以添加新活动（需要一个简单的 admin 页面，密码保护）

数据模型：
- events 表：id, title, description, date, location, max_attendees, current_count
- registrations 表：id, event_id, name, phone, email, created_at

设计：主色调 #6366f1，卡片圆角 12px，卡片有轻微阴影，整体简洁现代

发送后 Lovable 约 1-2 分钟生成完整代码。你会看到实时预览，可以边看边提修改意见。

第二步：迭代修改

第一版几乎不可能完美，需要几轮对话迭代。常见的修改话术：

  • 「活动卡片的图片用 picsum.photos 占位，每张图用活动 id 做种子保证不同」
  • 「报名表单加手机号格式验证（11位数字），邮箱验证格式」
  • 「admin 页面加一个活动列表管理表格，可以编辑和删除活动」
  • 「首页加一个搜索框，可以按标题筛选活动」

每次修改 Lovable 会重新生成受影响的部分，不会推倒重来。如果你发现某次修改导致其他功能坏了，可以直接说「回退到上一版本」。

第三步：连接 Supabase 数据库

Lovable 自带 Supabase 集成，不需要自己去 Supabase 创建项目：

  1. 点击顶部 Supabase 图标 → Connect
  2. 授权后 Lovable 自动在你的 Supabase 账号创建一个新项目
  3. 数据库表结构会自动生成（根据你需求描述中的数据模型）
  4. 表生成后可以在 Supabase Dashboard 的 Table Editor 中看到

连接成功后，所有数据操作（增删改查）都是真实的持久化存储了。之前的版本用的是内存数据，刷新就丢。

第四步：认证与权限

admin 页面需要密码保护。用 Supabase Auth 实现：

在 admin 页面加一个登录页面。
用 Supabase Auth 的 email/password 登录。
只有邮箱为 admin@example.com 的用户能访问 admin 页面。
其他用户访问 admin 页面自动跳转到登录页。

Lovable 会自动创建登录页面、接入 Supabase Auth、添加路由守卫。你可以在 Supabase Dashboard → Authentication → Users 里手动创建 admin 用户。

第五步：部署上线

代码改好、数据库连上后，一键部署：

  1. 点击右上角 Publish 按钮
  2. Lovable 自动构建并部署到它的 CDN（不需要 Netlify/Vercel）
  3. 部署完成后会给你一个 xxx.lovable.app 的网址
  4. 可以绑定自定义域名（在 Settings → Domains 中添加）

部署后每次你修改代码并保存，Lovable 会自动重新部署。不需要手动触发。

第六步：导出代码与本地开发

如果你想在本地继续开发或迁移到其他平台：

  • 点击 Settings → Export to GitHub，Lovable 会把代码推到你的 GitHub 仓库
  • 克隆到本地后，npm install && npm run dev 即可启动
  • 环境变量（Supabase URL/Key）在 Lovable 的 Settings → Environment Variables 里复制
  • 代码是标准的 Vite + React 项目，没有任何 Lovable 特有的依赖锁定

什么时候用 Lovable，什么时候换工具

  • 用 Lovable：MVP 验证、内部工具、活动/报名/问卷类 CRUD 应用
  • 换 Cursor：项目超过 5000 行、需要复杂业务逻辑、多人协作开发
  • 换 Bolt.new：纯前端展示页（Landing Page / 个人作品集）
  • 换 Claude Code：命令行工具、后端 API 服务、数据处理脚本
Lovable 的定位很清晰：把从想法到上线的距离从 2 周压缩到 2 小时。它不适合做复杂产品，但在验证「这个功能有没有人用」这件事上，它是目前最快的工具。