快速上手

从第一个提示到一款完整的全栈应用

​

Lovable 概览

欢迎阅读本逐步指南，了解如何使用 Lovable 创建全栈应用程序：

​

Lovable 平台概览

创建你的第一个项目

1. 步骤 1

   要开始使用，请前往 lovable.dev 并创建一个账号。注册完成后，你就可以创建你的第一个项目了。

2. 步骤 2

   只需输入一个初始提示来开启流程，剩下的交给 Lovable！这是在 Lovable 中创建任何项目的起跑台，你可以在这里立刻将想法变为现实。

Lovable 仪表盘

在 Lovable，一切以简单为先：

• 在 这里 你只需输入一个提示就能启动你的项目。
• 浏览所有项目，包括最新和精选项目。
• 从我们精心挑选的模板中快速起步。
• 个性化你的使用体验，查看并编辑个人资料。
• 管理你的账号，查看每月额度并调整设置。
• 在 Labs 中体验实验功能，如 Chat mode——可随时开启或关闭。
• 升级或降级 你的套餐，过程顺畅无缝。

项目概览

在 Lovable 中，每个项目都遵循一个结构化的工作流：

• 使用聊天式界面轻松编辑。
• 上传图片以进行精确编辑并获取灵感。
• 选择并可视化编辑组件，获得流畅的设计体验。
• 在编辑模式和 Chat mode 之间无缝切换。
• 通过版本历史跟踪更改，并可回退到任意之前的版本。
• 轻松在项目的各个页面间导航。
• 根据需要启用复刻或重命名你的项目。
• 使用 Lovable Cloud（或集成 Supabase）提供后端能力。
• 通过 GitHub 协作来编辑和管理代码。
• 发布、部署和分享你的项目，并使用预览链接（记得在更改后重新发布）。
• 在网页视图和移动端视图之间切换，方便进行响应式设计。
• 刷新预览弹窗，立即查看最新更新。
• 直接通过预览链接打开你的项目。

项目设置

每个项目的设置都可以帮助你：

• 查看关键项目信息，如总编辑次数和创建日期。
• 设置自定义知识，以定制项目的上下文。
• 连接到 GitHub 仓库，实现顺畅协作。
• 根据需要调整项目可见性。
• 管理徽章显示（仅适用于付费套餐）。
• 随时重命名你的项目。
• 删除你的项目（⚠️ 危险区域）。

项目快捷访问

你始终可以快速访问：

• 仪表盘，查看你的项目概览。
• 账号设置，管理你的个人资料和偏好。
• 文档和客户支持，获取指导和帮助。
• 安全地登出你的 Lovable 账号。

​

开始你的项目

根据你的偏好和资源，你有几种方式可以开始使用 Lovable：

提示

Lovable 的基于提示的系统让创建应用变得简单。

• 只需在提示框中描述你想要构建的内容。
• 描述得越具体，结果就会越好。
• 从清晰且详细的提示开始。
• 在构建过程中，你可以不断微调和调整你的项目。

示例：

“Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart.”

复刻现有项目

你可以复刻一个现有的公开项目，或复刻你自己的项目。复刻可以让你将某个项目的当前状态作为起点，在此基础上继续构建。这是探索新想法、进行调整，或在保留原始版本的同时尝试不同改动的好方法。

只有当其他用户的项目未连接到 Supabase 时，你才能复刻他们的公开项目。

使用 Figma

如果你在 Figma 中已有设计，请给其中任意部分截图。你可以将该截图直接粘贴到 Lovable 中，或将图像文件拖放进去。按下 Enter 键后，Lovable 会把你的设计转换为可运行的代码。

使用草图

1. 步骤 1

   使用 Excalidraw 或其他类似工具来绘制你的 UI 草图。

2. 步骤 2

   给你的草图截图，然后将其粘贴或拖放到 Lovable 中。平台会把你的草图转换为可运行的代码。

点击这里了解更多信息。

克隆网站或应用

如果你想复制一个现有网页：

1. 步骤 1

   使用 Cmd+Shift+4（在 Mac 上）等快捷键，或使用 GoFullPage Chrome Extension 等工具进行截图。

2. 步骤 2

   将该截图粘贴或拖放到 Lovable 中。Lovable 会在你的项目中重建该网页的结构。

点击这里了解更多信息。

​

编辑项目

向项目添加自定义知识

Lovable 中的 Custom knowledge 充当你项目的蓝图，在一个地方组织功能、设计和目标。

使用 Visual Edits

Visual Edits 允许你在页面上选择元素并立即编辑它们，比如更新文本或颜色，或者使用提示来调整功能和布局。

查看 Visual Edits 了解更多信息。

回退更改，或编辑消息后回退以采用不同思路

在构建 AI 驱动应用时，速度很重要，但稳定性和可控性同样关键。因此我们升级了版本管理，让变更追踪变得轻而易举。

1. 即时回退到过去版本，或采用不同方案

   你可以预览一个较早的可用版本，并在需要时回退到该版本，或者编辑一条过去的消息并回退，以探索不同的方案。不会丢失任何内容——在那之后所做的所有更改都会保留在对话中，并且可以随时重新应用。

2. 为关键修改加书签

   通过为重要修改添加书签来整理你的工作，便于稍后查找和再次查看。

3. 直观的版本历史

   历史记录面板现在的工作方式类似 Google Docs，使变更追踪更加轻松。

   

使用 21st dev 添加动画组件

向提示中添加图片

将图片直接附加到对话中，为你的提示添加上下文。这有助于更容易地展示那些用图像比用文字更好表达的想法或概念。

向项目添加新页面

重构代码

连接 GitHub

将你的项目与 GitHub 集成，以无缝迭代应用。你可以在 GitHub 或首选的 IDE 中进行代码更改，同时与 Lovable 保持一切同步。

查看 GitHub 集成 了解更多信息。

​

为你的项目添加全栈功能

连接后端

如果你需要为应用添加后端功能，你可以：

• 连接到 Lovable 内置的后端服务 —— Lovable Cloud
• 使用 Lovable 原生的 Supabase 集成

使用 Stripe 为应用添加支付功能

将 Stripe 连接到 Lovable 的方式有很多，但最直接的方式是使用 Stripe 内置的支付链接。更多信息请参见 Stripe 集成。

使用 Resend 添加邮件功能

更多信息请参见 Resend 集成。

​

部署并发布你的项目

设置 SEO

请参照我们的《实施 SEO 和 GEO 最佳实践》指南操作，以获得最佳效果。

添加自定义域名

你可以通过以下服务添加自定义域名：

• Entri（Lovable 原生集成）
• Netlify
• Vercel
• Namecheap

更多信息参见自定义域名。

发布我的项目

当你的项目准备就绪后，将其发布以生成一个可分享的 URL。这样可以更轻松地展示你的应用，或与协作者和相关方分享。

更多信息参见发布。