【AI开发工具】Lovable 的 Vibe Coding！Supabase 和 AI 助力全面开发 Web 应用 | 如何开始使用 & 定价方案

“我想创建更专业的服务，但我认为我无法编写代码......”

对于认真对待氛围编码的非工程师来说， Lovable是下一步的完美开发平台。

最近，使用 AI 生成登录页面和 UI 的工具有所增加，但
在许多情况下，它们还不足以创建具有登录、数据库和处理功能的实际

与那些“仅供参考”的工具不同，Lovable 的最大吸引力在于它允许您使用自然语言构建基本应用程序功能，例如数据库、身份验证和服务器处理。

基于Supabase，复杂的设置被尽可能地包装，让您以无代码的感觉开始全面的服务开发

在本文中，我们将根据自己的使用经验介绍 Lovable 的吸引力、它能做什么、如何开始以及定价计划。

我目前使用的是 Pro 套餐，每月 25 美元。
稍后我会详细解释你应该选择哪个套餐

什么是 Lovable？您可以用它做什么？

Lovable是一个人工智能开发平台，允许您简单地使用自然语言命令来构建、编辑和发布 Web 应用程序。

近年来，一种名为“氛围编码”的开发风格备受关注。在这种风格中，开发者可以通过聊天指令开发应用程序，然后系统会根据指令生成应用程序。Lovable
是实现这种开发风格的领先工具之一。

所有后端功能，例如数据库、身份验证和后端功能，在 Supabase 上自动构建的，其优势在于包括这些在内的整个应用程序都可以以聊天格式进行开发。

换句话说，只需用自然语言发出命令，即可立即创建
一个功能齐全的基于 Supabase 的 Web 应用程序在保持无代码便捷性的同时，您可以获得可扩展、可立即投入生产的配置

“你只需用自然语言给出指令，就能创建一个基于 Supabase 的 Web 应用程序。”
Lovable 就是提供这种开发体验的工具。

您实际可以创建的应用程序示例

• 具有登录功能的 Web 服务（用户注册、身份验证和访问控制）
• 咨询表及预约表（含数据存储及通知）
• 简单的 CMS 和管理仪表板
• 人工智能聊天机器人和自动响应工具
• 连接到外部 API 的应用程序（Slack 通知、Notion 同步、Gmail 发送等）
• 使用 Supabase 数据库的应用程序（数据列表、详细信息、更新等）

您还可以根据预制模板

Lovable 有哪些特点？

Lovable 最大的特点是，仅使用自然语言就可以创建“合适的 Web 应用程序”。

当今的许多 AI 开发工具在生成页面外观和 UI 方面非常出色，但
它们通常缺少应用程序的基本元素，例如登录、数据库和处理逻辑

与那些“仅仅为了外观的工具”不同，Lovable
建立在 Supabase 之上，包含从前端、身份验证、数据库到后端的所有功能。

只需通过聊天传达您的要求，就会生成一个应用程序作为 Web 服务，
然后您可以在自己的域中在一个地方发布和操作该应用程序。

功能	内容
Supabase 集成和自动创建	数据库、身份验证和后端功能均在 Supabase 上自动构建，从而允许仅使用自然语言构建成熟的 Web 应用程序。
部署功能	创建的应用程序可以立即发布到网络上。构建完成后，您可以立即在子域名上检查其运行情况。
GitHub 集成	前端代码（React）可导出至 GitHub。支持低代码部署和全代码部署。
原始域名	您可以通过设置任意自定义域名来发布您的应用。DNS 设置在设置后会立即生效，并且也适用于商业用途。

Lovable 的另一个吸引人的特点是，您可以从一定量的“基础知识”开始，而不必“从头开始思考一切

• 模板功能：
  选择预先准备的应用模板，即可立即开始开发。
  例如，“登录服务”、“预约管理”、“商品列表”等常用配置均已设置完毕。
• 多应用程序管理：
  您可以使用一个帐户同时拥有多个项目，轻松地为不同目的进行原型设计、分支和操作

这样，Lovable 的主要特点是利用“ Supabase

当我实际使用 Lotable 时，我感到惊讶的事情

实际使用Lovable时，我多次感到惊讶，“哇，居然能做这么多！”
特别是以下几点，让我意识到即使非工程师也能安心使用，并切实推进“服务开发”。

✅ 连接到 Supabase 比您想象的要容易！

你确实需要注册一个 Supabase 账户，但之后你只需按照屏幕上的说明操作即可完成设置。
说实话，这出乎意料地简单，我很庆幸之前没有这么做，因为我觉得这有点麻烦。

感谢 Lovable 处理了所有幕后设置，我觉得最大的吸引力在于我不必担心只使用 Supabase

✅ Supabase 上列出了数据库规格和其他信息，让您轻松理解！

由于Lovable直接使用Supabase，因此存储容量、传输量、MAU限制等信息均已正式声明，并且易于理解。
，它可以根据开发规模轻松做出决策，例如“我可以免费做多少？”和“我需要哪个计划”。它感觉不像一个黑匣子。

✅ 自然地创建后端功能！

例如，如果您在聊天中说“我想使用 OpenAI 的 API”， Lovable 不仅会自动显示一个用于输入您的 API 密钥的字段，而且
还会自动将该过程生成为后端函数（Superbase Functions），确保安全配置。

他们基于“API 密钥应该在服务器上处理，而不是在前端处理”的前提构建它，这真的很有帮助，甚至不需要我们给出详细的说明

类似的工具Bolt.new倾向于
在前端完成处理，除非您有意识地指定这种职责分离Supabase正确连接，然后构建后端功能，因此这是一种可靠的配置。

“我用自然语言编写了它，并且它以正确的结构实现。”
我觉得这种经验使非工程师更容易投身于产品开发。

✅ 将数据保存到数据库很容易！

只需通过聊天告知您想要保存这些信息， Supabase 就会自动生成相应的模式，并一次性构建 CRUD 操作。
保存和检索数据等处理也会在后台自动完成，因此应用程序无需任何额外操作体验非常流畅。

不过，由于 Lovable 与 Supabase 合作，你需要注意
Supabase 的限制免费计划仅限于
两个项目和 500MB 的存储空间即使你升级到每月 25 美元的付费计划，仍然是8GB

如果要正常运营服务或者用户数量激增、数据量不断增加的话，这个限制可能会有点让人不满意。

✅ 身份验证功能可以轻松实现！

只需告诉我们您想添加登录功能，用户注册/登录屏幕和身份验证实现就会自动合并。

因为它在后台使用 Supabase 的身份验证功能，所以无需自己设置 OAuth 或管理登录状态的麻烦。

Supabase 端的身份验证也存在限制。

• 免费计划允许每月最多 50,000 名活跃用户
• Pro 计划每月还支持最多 100,000 名用户

当然，我认为没有
多少人会立即创建每天有超过 100,000 名用户使用的服务这对于正常开发来说不是问题，但如果您考虑未来的规模，那么意识到这一点是个好主意。

✅ 在您自己的域上发布信息非常简单！

使用 Lovable，您可以直接在自己的域上发布您创建的应用程序

• 您也可以在 Lovable 的“购买域名”页面购买域名
• 您也可以使用您已经拥有的域名！

只需注册“自定义域名”，立即发布到您自己的域名上，无需任何特殊设置。
即使您没有任何技术知识，也会感觉“不知不觉”就发布到您自己的域名上了

✅ 立即开始使用我们的模板！

Base44提供了许多
可用的应用程序模板即使您担心从头开始，也可以使用模板作为基础，从可用的示例开始。

有一些非常专业的应用程序模板，所以值得一看！

✅ 迁移起来可能很容易。这是一个 React x Supabase 配置，因此您可以重复使用它！

生成的应用程序前端使用 React 构建，后端使用 Supabase 构建。因此，即使之后有新的工程师接手开发，通用的技术栈也能轻松过渡。
也可以使用 Lovable 构建的资源，并保持其原有的可用性

诚实地表达你对 Lotable 的担忧

虽然我一直对 Lovable 赞不绝口，但还是有一些需要注意的地方。
特别总结了一些可能会让非工程师感到疑惑的地方，尤其是在他们开始认真开发这项服务的时候

❗注册 Supabase 几乎必不可少。免费计划有限制。

Lovable 由 Supabase 提供支持，因此您基本上需要注册一个 Supabase 帐户。
，包括数据库、身份验证和后端功能，都与 Supabase 协同工作。

然而， 有
两个项目和 500MB 存储空间老实说，这并不适合“想要随意创建和尝试大量应用程序”的氛围编码方法

这意味着在很多情况下，是
强制性的请注意，如果 Supabase 将来更改其定价结构或限制，这可能会对 Lovable 的发展产生直接影响

要继续开发应用程序，您需要关注 Lovable 和 Supabase 的规格和价格，这似乎有点缺点。

❗Supabase 的局限性对于非工程师来说很难理解

由于 Lovable 在 Supabase 基础上运行，因此该应用程序的许多行为和限制都取决于 Supabase 的规格。

例如：

• 每月活跃用户：最多 100,000 人（超过 100,000 人将按使用量付费）
• 存储空间：最高 8GB（超过 1GB 则每 GB 加 1GB）
• 文件大小、传输量、日志保留期限等。

这样，开发和运营相关的规格就由“数字×计费系统”详细决定，而
，非工程师很难根据使用量看出每个需要花费多少钱。

尤其，

• 即使你说“100,000 MAU”，也很难想象要花多长时间才能达到这个数字。
• 即使你说“8GB存储空间”，我也不知道如何才能超过这个数字。
• 当现收现付制突然启动时，您可能会感到惊讶。

还存在一些隐藏的成本风险，例如：

仅仅查看“信用余额”是不足以让人感到安心的；在开发过程中，你可能会发现
自己想知道“嗯？为什么这不起作用？”或“为什么会产生钱？”。

虽然 Lovable 本身很容易使用，但需要记住的是，除非您对底层 Supabase 规范有基本的了解，否则您可能会措手不及

❗你只能创建 React 应用

Lovable 生成的应用程序仅限于基于 React，
因此无法使用 Vue 或 Next.js 等框架构建。

虽然该功能对于非工程师来说已经足够了，但对于想要灵活配置的工程师来说可能

❗输出了完整的源代码，但对于非工程师来说可能难以使用。

有
在浏览器中查看和编辑 Web 应用生成的虽然它让你安心地知道你可以正确查看代码，但输出的一个完整的基于 React 的应用程序包含
大量文件和纯 React 结构。

即使是像“我想改变一点措辞”或“我想修复按钮的行为”这样的小编辑，也很难知道要触及哪个文件，我对非工程师来说可能是一个挑战。

例如，一个名为 Base44 的类似服务会隐藏配置文件并以易于查看的方式组织关键文件，
给人一种很容易理解“在哪里查看”的印象。

Lovable的结构很精心，但对于“在哪里以及如何编辑”的导航却很少，因此非工程师可能会在自行修复代码时遇到一些困难。

比较Lovable的定价方案！推荐哪一个？

除了免费方案外，Lovable 还提供三种定价方案。
专业版方案还允许您增加每月的信用额度（但每月费用会更高）。

下表总结了两个计划之间的差异。
使用免费计划，您几乎无法创建一个应用程序。

计划名称	每月费用	信用	Supabase 集成	原始域名	GitHub 集成	特征
自由的	$0	5/天（最多 30/月）	✅ 必填	×	✅ 代码可用	试用。仅限公众。
Pro	$25	5/天（最多 150/月）+ 100 积分/月	✅ 必填	✅ 支持	✅ 代码可用	非常适合个人发展。此外，还提供自定义域名和私人设置。
商业	$50	5/天（最多 150/月）+ 100 积分/月	✅ 必填	✅ 支持	✅ 代码可用	适用于团队开发和企业使用。包含单点登录 (SSO) 和数据控制。
企业	请咨询	风俗	✅ 必填	✅ 支持	✅ 代码可用	包括实施协助和专门支持。适用于大型组织

✅ 如果您想开发一款应用程序，“Pro Plan”几乎是必不可少的！

我实际上使用的是 Pro 计划（每月 25 美元） ，如果您想创建一个合适的应用程序，这个计划基本上就是起点。

• 每月 100 个积分 + 每天 5 个积分（每月最多 150 个积分）以及大量执行
• 支持您自己的域，因此您可以按原样将其发布为服务
• 它具有所有必要的功能，包括私人项目、GitHub 集成和用户权限管理

但是，您需要将 Supabase 费用视为一组。

Lovable 基于 Supabase，因此Supabase 帐户和连接对于使用后端、身份验证和数据库几乎是必不可少的。

• 免费计划有“2 个项目”、“500MB”和“50,000 MAU”等限制。
• 如果您创建多个应用程序或扩展存储或身份验证，则需要每月支付 25 美元购买 Supabase 的专业版。

换句话说， Lovable Pro（25 美元）+ Supabase Pro（25 美元）= 每月最低费用约 50 美元。
提前知道这一点是件好事。

如何开始使用 Lovable！Supabase 设置详解

使用 Lovable 非常简单。按照以下步骤即可立即开始构建您的应用。

①访问官方网站

首先，进入官方网站，选择“开始”。

②创建账户（Google账户即可）

当出现“创建您的帐户”时，请使用 Google 或电子邮件注册一个帐户。
下一个屏幕上有几个字段需要输入所需信息。

输入帐户详细信息后，您就可以创建应用了。如果您使用的是免费套餐，则创建过程已完成。
接下来，我们将向您展示如何注册专业版或更高版本的套餐，以及如何激活 Supabase。

③ 打开“计划和计费”并注册专业计划（如果只是想试用，则不需要）

选择“账户图标”⇒“设置”。

选择“计划和账单”并升级到专业版计划。（此时请确保您的积分已设置为 100。）

④注册Supabase集成设置

选择“账户图标”⇒“设置”。

选择“Supabase”⇒“管理已连接的组织”。

选择“添加更多组织”。
*如果您尚未注册 Supabase 帐户，系统可能会提示您注册一个帐户。

选择“授权可清洗”。

现在您已连接到 Supabase，
但您可能没有项目，因此请创建一个。

在聊天下方，您将看到“Supabase”，因此选择它，然后选择“创建项目”。

输入所需信息并选择“创建新项目”。

这将创建一个新项目，因此在开始创建应用之前，请先选择它。
注意：每次创建新应用时，最好都创建一个新项目。

⑤您可以检查并调整生成的应用程序并按原样发布！

现在您要做的就是开发您的应用程序并发布它！

有关如何创建应用程序的详细说明，请参阅我们的单独文章，其中通过实际屏幕截图解释了相关步骤。

它提供了有关如何创建和发布应用程序的详细说明，包括如何在您自己的域上发布它。

（准备中）

最后：有了 Supabase 的帮助，Lovable 将成为“非工程师的最佳开发环境”

无代码对你来说还不够，但你还没有准备好成为一名工程师。
对于那些处于这种“中间地带”的人来说， Lovable 和 Supabase是理想的选择。

Lovable 基于 Supabase 架构，允许你使用自然语言完成后端功能、身份验证和数据库操作。
此外，该架构自动生成，同时自然地保护了安全性和设计的基础，因此即使对自身开发技能没有信心的人也能创建“合适的应用程序”。

当然，Supabase 方面也存在限制和收费，
“即使非工程师也能够开发出严肃的服务”的宝贵足以弥补这一点

如果您想在不编写任何代码的情况下正确地创建某些东西