Lovable 教程：做出并发布你的第一个应用

做出并发布你的第一个应用

你需要一个浏览器和一个邮箱，或者 Google、GitHub、Apple 账号，什么都不用安装。每次请求生成都会消耗生成额度，Lovable 的免费套餐每天有五个，每月最多 30 个。做第一个应用，这些就够了。

Lovable 的快速入门做的是一家虚构的社区咖啡馆 Little Fern 的网站。下面这条提示词就是指南里的原样示例。你有自己的想法，就换成自己的，步骤不变。

Build a website for Little Fern, a neighborhood cafe. Include a warm hero section with a headline and a photo, an interactive menu where visitors filter items by category (coffee, breakfast, lunch, pastries), an opening hours section, and a location section with the address and a short "find us" description. Use realistic sample content throughout. Cozy, welcoming design. Works well on mobile. No login or database yet.

1. 注册账号。在 lovable.dev 注册。你会得到一个免费套餐下的个人工作区，Lovable 随后打开控制台。
2. 描述应用。确认模式选择里选的是 Build，把提示词贴进写着“Ask Lovable to create…”的输入框，然后发送。用什么语言写都可以。最后一句让第一版先不带登录和数据库，以后再发一条提示词就能加上。
3. 等第一版出来。大约要几分钟。随后编辑器打开，左边是项目聊天，右边是预览，也就是正在运行的应用。
4. 一次只提一个修改。比如：“Add a "Today's specials" section between the menu and the opening hours, highlighting two menu items with a short description and price.”每提一次就看一眼预览。说感觉也行：“Make the whole site feel warmer and less corporate.”
5. 指出来，不用描述。小的视觉修改，打开预览工具栏，选中那个元素，说要怎么改。要改标题或按钮上的字，选 Edit text inline，直接在页面上打字，不用写提示词。
6. 像访客一样检查。每个按钮和链接都点一下，每个筛选都试一次，再用预览上方的设备切换按钮换到 Mobile view。哪里不对，就说清是什么、在哪里：“In the menu, clicking the pastries filter shows no items. It should show the pastry items.”
7. 发布。点编辑器右上角的 Publish。Lovable 会建议一个以 lovable.app 结尾的网址，你可以修改，同时它会跑一次快速安全扫描。再点一次 Publish 完成部署，部署就是把当前版本复制到访客访问的服务器上。

线上网站是一张快照。新的修改会立刻出现在预览里，但访客要等你点了 Publish、再点 Publish changes 之后才看得到。Publish 按钮上出现一个小圆点，说明还有修改没有发布。网页标题、描述和标签页图标，Lovable 也会在生成时一并写好，想改就在聊天里说。

Chat、Plan 还是 Build：打字之前先选模式

提示框下面的模式选择，决定了 Lovable 能不能动你的代码。Build 模式会修改应用，所以在这里随口问一句，回来的可能是一次改动。Chat 和 Plan 不碰代码。

可以用选择器切换，也可以用快捷键在三种模式之间轮换，Windows 和 Linux 按 Alt+P，Mac 按 Option+P 即可。一条 Chat 消息按回答它所花的工作量计价，通常不到一个额度，所以想问某个功能怎么运作，Chat 更省。Lovable 自己给的一个 Chat 示例问题正好适合这家咖啡馆，大意是：想加一个集章卡，每次消费盖一个章，集满十个送一杯咖啡。这个应用要怎么改才能做到，有没有更简单的版本可以先试？

Plan 模式可能先问你几个问题。等它有了清楚的做法，计划会出现在 Plan 视图里，是一份可以修改的文档。想改其中一部分，就选中它，点 Comment，写下要怎么改，Lovable 只重写那一段。点 Approve 会切换到 Build 模式并开始动手，点 Skip 则跳过这份计划。批准过的计划会以文件形式留在项目的 .lovable/plan/ 文件夹里，以后还能回头读一读，某个功能当初为什么这样做。

一条 Plan 消息花一个额度，规划时 Lovable 做的调研另算。Chat 消息先从每天的聊天额度里扣。做咖啡馆网站，几乎每一轮用 Build 就够了。第一次加登录或数据库时，Plan 就值回这个额度了，因为在任何东西被改动之前，你已经读过要改什么。

撤销、查看代码和添加后端

每次修改都会自动成为一个版本，所以不存在忘了保存这回事。在编辑器顶栏打开 History，可以预览任何一个旧版本、查看它改了哪些代码，或者点 Revert 退回去。大改版之前，给能用的版本加个书签，它就始终在一键之外。Revert 只恢复代码。数据库里的数据保持原样，那些消息花掉的额度也不会退回。

Lovable 生成的都是标准代码，项目工具栏里的 Code 标签页会把它显示出来。免费套餐下，这个编辑器是只读的。付费套餐可以在里面改文件，也能把整个项目下载成 .zip 文件。你手动保存一次，也会成为一个版本，并且不花额度。

想要一份始终最新的完整副本，就连接 GitHub，一个连同改动历史一起存放代码的网站。工作区连好 GitHub 之后，依次打开 Project settings、Git、GitHub，点 Connect。Lovable 会新建一个私有仓库，也就是 GitHub 上的一个项目文件夹，并让两边双向同步。所有套餐都能用 Git 同步，但它不能接到你已有的仓库上。

后端是应用在服务器上运行的那部分：数据库、用户账号、文件存储和服务器端代码。Lovable 的内置后端，在产品的部分地方叫 Cloud，默认就为你的工作区开启。某个功能需要它时，它就启动，底层用的是 Supabase 的开源基础。想改用你自己的 Supabase 项目，依次打开 Settings、General、External Supabase，点 Connect。这个选项只出现在还没有后端的项目里。

早点做决定。Lovable 不能一步把项目从一种后端搬到另一种。

真实数据进来之后，把 API 密钥放进 Secrets。你把密钥贴进聊天，Lovable 会发现，并引导你把它存到那里。行级安全策略也要读一读，就是规定谁能看到哪些行的数据库规则，位置在 More、Database、Manage、Policies。Publish 对话框里的快速扫描大约 10 秒就能查完这些规则。深度扫描会检查你的全部代码，可以从 Security 视图启动，也可以在项目聊天里请 Lovable 做一次安全审查，通常要 3 到 13 分钟。

Lovable 联合创始人和一位天天用它的开发者，怎样先规划再动手

Lovable 联合创始人 Anton Osika 在 2025 年 11 月 24 日 在 X 上给过一条建议：准备做大改动、或者卡住的时候，就切到 Chat 模式。他还说，Lovable 的重度用户都离不开它。Chat 改不了你的代码，在那里把改动商量清楚，应用不会有任何变化。做咖啡馆网站时，加登录或数据库之前先在 Chat 里试试，想清楚了再去 Build。

Prajwal Tomar 的 X 简介写着他靠 AI 经营五家生意。2026 年 7 月 23 日，他 在 X 上分享了一个做法：动手之前，先把 MVP 计划存成项目根目录下的一个 Markdown 文件。MVP 即最小可行产品，也就是值得拿给别人用的最小版本。他说，计划写进文件之后，智能体每条提示词都对照它来做，不会一次比一次偏离计划。

第一课写的简述，也可以这样用。在 Build 模式下请 Lovable 把它存成 plan.md 这样的文件，以后加功能时，在提示词里指明参照这个文件。下面的视频里，Kevin Stratvert 也是先用 Plan 模式，再做出一个新手应用。

X 官方嵌入卡片的截图，拍摄于 2026-11-05，时间为协调世界时（UTC）。X 用“Show more”截断了 Prajwal Tomar 帖子后面的内容。点击截图可到 X 上打开原帖。

常见错误

• 以为预览变了，线上网站也会跟着变。点 Publish changes 之前，访客看到的一直是上次发布的版本。
• 第一条提示词就要登录、付款和数据库。先把页面做好，再一条消息加一个后端功能。
• 用一大段话描述一个小小的视觉修改。在预览里选中元素更快，也更不容易被误解。
• 想用 Revert 撤销数据改动。后来的消息新增或修改过的数据行，仍然留在数据库里。
• 把 API 密钥贴进提示词或页面代码。把它存进 Secrets，再让 Lovable 从服务器端代码调用那项服务。
• 扫描查出严重问题还照样发布。默认情况下它们不会阻止发布，所以先打开 Security 视图把它们修好。
• 为了整洁删掉 GitHub 仓库。这会让同步中断，重新连接时 Lovable 会新建一个仓库。
• 把免费套餐上的应用放着一年不管。免费工作区里的项目，如果 12 个月没有访问、工作区所有者也没有登录过，Lovable 可能会把它下线。

下一课：Cursor 教程

继续之前，把第一课里写的那份简述拿到 Lovable 里做出来。发布之后改一个标题，用手机打开线上链接，新标题还没有出现。发布这次修改，刷新页面，它才出现。这样走一遍，快照规则就不会再让你意外。

Lovable 把代码藏在你看不见的地方，Cursor 教程则把它摆到你眼前：你打开一个文件夹，让智能体修改，每一处改动都先看过再保留。同步到 GitHub 的 Lovable 项目，正好可以当作在那里打开的第一个文件夹。

常见问题

资料来源

1. Lovable docs: Quick start (2026年11月5日 查阅)https://docs.lovable.dev/introduction/getting-started
2. Lovable docs: Publish your Lovable project (2026年11月5日 查阅)https://docs.lovable.dev/features/publish
3. Lovable docs: Version history (2026年11月5日 查阅)https://docs.lovable.dev/features/projects/history
4. Lovable docs: View and edit your project's code (2026年11月5日 查阅)https://docs.lovable.dev/features/code-mode
5. Lovable docs: Sync your project with GitHub (2026年11月5日 查阅)https://docs.lovable.dev/integrations/github
6. Lovable docs: Built-in backend (2026年11月5日 查阅)https://docs.lovable.dev/features/cloud
7. Lovable docs: Connect to Supabase (2026年11月5日 查阅)https://docs.lovable.dev/integrations/supabase
8. Lovable docs: Plan mode (2026年11月5日 查阅)https://docs.lovable.dev/features/plan-mode
9. Lovable docs: Chat mode (2026年11月5日 查阅)https://docs.lovable.dev/features/chat-mode
10. Lovable docs: Security overview (2026年11月5日 查阅)https://docs.lovable.dev/features/security
11. Lovable docs: Changelog (2026年11月5日 查阅)https://docs.lovable.dev/changelog
12. Lovable blog: How we built Lovable, and why we keep rebuilding it (2026年11月5日 查阅)https://lovable.dev/blog/how-we-built-lovable-and-why-we-keep-rebuilding-it
13. Anton Osika on X, November 24, 2025 (2026年11月5日 查阅)https://x.com/antonosika/status/1993073007296729546
14. Prajwal Tomar on X, July 23, 2026 (2026年11月5日 查阅)https://x.com/PrajwalTomar_/status/2080330348718928133
15. Kevin Stratvert on YouTube: Lovable AI Tutorial for Beginners (2026年11月5日 查阅)https://www.youtube.com/watch?v=y4IJbZ1E1DM