Lovable 不只是一个"帮你写代码"的工具，它构建了一套从想法到上线的完整工作流。理解它的核心功能，才能发挥它的全部潜力。

功能一：AI 代码生成引擎

Lovable 底层使用多个顶级 AI 模型（包括 Claude 系列），生成的代码技术栈固定为：

• 前端：React 18 + TypeScript + Vite
• 样式：Tailwind CSS + shadcn/ui 组件库
• 状态管理：React Query（服务端状态）+ React hooks（本地状态）
• 后端（可选）：Supabase（PostgreSQL 数据库 + Auth + Storage）

这个技术栈选择是有意为之：React + TypeScript + Tailwind 是 2025-2026 年最主流的 Web 开发组合，生成的代码质量高、可维护性强。

代码示例：当你说"添加一个带验证的登录表单"，Lovable 生成的代码大致是：

// 使用 shadcn/ui 的 Form 组件 + react-hook-form + zod 验证
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

const loginSchema = z.object({
  email: z.string().email("请输入有效的邮箱地址"),
  password: z.string().min(8, "密码至少 8 位"),
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(loginSchema),
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>邮箱</FormLabel>
              <FormControl>
                <Input placeholder="you@example.com" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        {/* password field... */}
        <Button type="submit" className="w-full">登录</Button>
      </form>
    </Form>
  )
}

这是地道的生产级 React 代码，不是玩具。

功能二：实时预览与可视化编辑

Lovable 的右侧预览不只是静态截图，它是一个真实运行的应用实例：

• 可以点击按钮、填写表单、触发交互
• 响应式预览：可以切换手机/平板/桌面视图
• Select mode：点击预览里的任何元素，AI 会自动定位到对应代码并告诉你可以怎么修改

这个功能让非技术用户可以用"点击"代替"描述位置"：

# 与其说
把右上角第三个按钮的颜色改成红色

# 不如直接点击那个按钮，然后说
把这个按钮改成红色

功能三：版本历史与回滚

每次对话修改都是一个 Git commit，Lovable 提供可视化的版本历史：

• 右上角时钟图标 → 打开版本历史
• 每个版本显示：时间戳、对应的 prompt 摘要、代码变更文件列表
• 一键回滚到任意历史版本

实际使用场景：

你改了 UI，结果越改越乱 → 回滚到 3 个版本前
你误删了一个功能 → 查看历史找到删除前的版本 → 回滚

这本质上就是 Git，只是 Lovable 给它套了一个对话界面。

功能四：Supabase 原生集成

这是 Lovable 最强的差异化功能。Supabase 是一个开源的 Firebase 替代品，提供：

• PostgreSQL 数据库：真实的关系型数据库
• Auth：用户认证（邮箱/密码、Google OAuth、GitHub OAuth）
• Storage：文件存储（图片、PDF 等）
• Edge Functions：服务端逻辑

在 Lovable 里连接 Supabase 只需要三步：

Step 1：在 supabase.com 免费创建项目，获取 API URL 和 anon key

Step 2：在 Lovable 项目右上角点击 Supabase 图标，粘贴连接信息

Step 3：直接在对话里描述你的数据需求：

帮我创建一个 todos 表，字段：
- id (uuid, primary key)
- user_id (uuid, 关联 auth.users)
- title (text, not null)
- completed (boolean, default false)
- created_at (timestamp, default now())

然后更新应用，把本地的 todo 存储改成读写这个数据库

Lovable 会自动生成 Supabase 的 SQL migration 和前端的数据库操作代码。

功能五：一键部署

Lovable 自带托管服务，一键部署无需任何配置：

1. 点击右上角 Publish 按钮
2. 等待 30 秒左右
3. 得到一个 https://xxx.lovable.app 的 URL

生产级部署注意事项：

• 免费计划使用 Lovable 子域名（xxx.lovable.app）
• Pro 计划支持绑定自定义域名
• 应用运行在全球 CDN，访问速度快
• HTTPS 自动配置

如果你想部署到自己的服务器，也可以：

# clone 下来后自行部署
git clone https://github.com/your-username/your-project.git
cd your-project
npm install
npm run build

# dist/ 目录里就是静态文件，可以部署到任何静态托管
# 如 Vercel、Netlify、Cloudflare Pages

功能六：GitHub 双向同步

连接 GitHub 后，Lovable 和本地开发形成完美互补：

Lovable（快速迭代 UI）
        ↕ GitHub
本地编辑器（精细代码调整）

工作流示例：

# 1. 在 Lovable 里用对话生成初版 UI
# 2. clone 到本地
git clone https://github.com/your-username/project.git

# 3. 本地做精细调整（比如复杂的业务逻辑）
# 编辑文件...
git add . && git commit -m "add complex sorting logic"
git push

# 4. 回到 Lovable，继续用对话改 UI
# Lovable 会自动 pull 你的本地更改

注意：本地 push 的更改会同步到 Lovable，但 Lovable 的 AI 不会理解本地代码的语义——它只能基于当前代码状态继续生成，不会"记住"你的本地更改意图。