Skip to main content

快速上手

从第一个提示到全栈应用

Lovable 概述​

欢迎使用这份逐步指南，学习如何利用 Lovable 创建一个全栈应用。

lovable

Lovable 平台概述​

创建您的第一个项目

步骤 1
首先，访问 lovable.dev 创建一个账户。

步骤 2
注册后，您便可以创建您的第一个项目。

步骤 3
只需输入一个初始提示，Lovable 就会自动处理后续工作！这是 Lovable 中任何项目的起点，让您能瞬间将想法转化为现实。

lovable

Lovable 仪表板

在 Lovable 中，简洁至上：

  • 这里 您可以用一个提示启动项目。
  • 浏览所有项目，包括最新和精选项目。
  • 从模板快速起步，选择我们的精选集合。
  • 个性化您的体验，通过查看和编辑个人资料。
  • 管理您的账户，查看月度积分并调整设置。
  • 探索 Labs 功能，如聊天模式——随时开启或关闭。
  • 升级或降级 您的计划，操作便捷。
项目概述

在 Lovable 中，每个项目均采用结构化的工作流程：

  • 轻松编辑，利用基于聊天的界面。
  • 附加图像，以实现精确编辑和灵感激发。
  • 选择并视觉编辑组件，享受无缝的设计过程。
  • 轻松切换 编辑模式和聊天模式。
  • 跟踪更改，通过版本历史并恢复任何先前版本。
  • 轻松导航项目页面。
  • 启用混搭 或按需重命名项目。
  • 集成 Supabase，添加后端功能。
  • 通过 GitHub 协作，编辑和管理代码。
  • 发布、部署并分享 您的项目，使用预览链接（更改后请重新发布）。
  • 在网页和移动视图间切换，实现响应式设计。
  • 刷新预览模态框，即时查看更新。
  • 使用预览链接直接打开 您的项目。
项目设置

每个项目的设置让您能够：

  • 查看关键项目详情，如总编辑次数和创建日期。
  • 设置自定义知识，以定制项目的上下文。
  • 连接 GitHub 仓库，实现无缝协作。
  • 调整项目可见性，从公开切换到私有。
  • 管理徽章显示（仅限付费计划）。
  • 随时重命名项目。
  • 删除项目（⚠️ 危险区域）。
项目快速访问

您可以随时快速访问：

  • 仪表板，获取项目概览。
  • 账户设置，管理个人资料和偏好。
  • 文档、反馈门户和支持，获取指导和帮助。
  • 安全登出 Lovable 账户。

开始您的项目​

提示

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

  • 只需在提示框中描述您要构建的内容。
  • 越具体，结果越出色。
  • 从清晰且详细的提示入手。
  • 您可以随时完善和调整项目。

示例： “创建一个带有用户登录、月度销售线图和客户人口统计饼图的仪表板。”

模板

  1. 步骤 1 - Lovable 提供 模板，帮助您快速启动热门项目类型，如仪表板、电商网站或社交应用。

  2. 步骤 2 - 模板加载后，使用提示调整功能、添加新元素或微调设计，以符合您的愿景。

混搭现有项目

您可以混搭现有的公开项目或您自己的项目。混搭让您以当前项目状态为起点进行构建，是探索新想法、进行调整或迭代的理想方式，同时保留原始版本。

请注意，Supabase 连接时无法进行混搭。

使用 Figma

如果您有 Figma 中的设计：

  1. 使用截图： 截取设计的任何部分，然后直接粘贴到 Lovable 或拖放图像文件。按 Enter 后，Lovable 会将其转换为可运行代码。
  2. 使用 Builder.io 集成： 首先，使用 Auto-Layout 和清晰图层命名结构化设计。然后，在 Figma 中打开 Builder.io 插件，选择设计并点击“在 Lovable 中打开”，生成完整功能的应用。了解更多。
使用草图

  1. 步骤 1 - 使用 Excalidraw 或类似工具绘制 UI。

  2. 步骤 2 - 截取绘图截图，然后粘贴或拖放到 Lovable 中。

  3. 步骤 3 - 平台会将草图转换为可运行代码。

了解更多。

克隆网站或应用

如果您想复制现有网页：

  1. 步骤 1 - 截取要克隆的网页截图。

  2. 步骤 2 - 将截图粘贴或拖放到 Lovable 中。

  3. 步骤 3 - Lovable 会重新创建网页结构到您的项目中。

了解更多。

编辑您的项目​

向项目添加自定义知识

自定义知识 在 Lovable 中作为项目的蓝图，将功能、设计和目标组织在一起。

选择与视觉编辑

视觉编辑 利用 Tailwind 原生视觉控件，实现 AI 驱动开发的轻松优化。

撤销更改

在构建 AI 驱动应用时，速度与稳定性和控制力同样重要。为此，我们升级了版本管理功能，使跟踪更改变得更便捷。

lovable

  1. 立即恢复过去版本 - 要返回先前版本，只需点击相应版本的“恢复”。

  2. 收藏关键编辑 - 通过收藏重要编辑，方便组织和后续查找。

lovable
  1. 直观的版本历史 - 历史面板如今像 Google Docs 一样运作，便于跟踪更改。
lovablelovable
使用 21st dev 添加动画组件
向提示添加图像

直接将图像附加到聊天中，为提示添加上下文，便于说明那些更适合视觉表达的想法。

向您的项目添加新页面
重构代码
连接到 GitHub

将项目与 GitHub 集成，实现无缝迭代。您可以在 GitHub 或首选 IDE 中修改代码，同时保持与 Lovable 的同步。

了解更多。

向您的项目添加全栈功能​

连接后端

Supabase 是一个后端即服务平台，可与 Lovable 无缝集成，为应用添加强大后端功能。

  1. 设置 Supabase - 在 Supabase 创建账户并新建项目。

  2. 链接到 Lovable - 在 Lovable 中，前往 设置 -> 连接 Supabase 并按步骤操作。

  3. 管理数据 - 设置表格、管理用户数据并配置电子邮件通知。

Supabase 快速上手

设置 Supabase 项目后，将其连接到 Lovable 项目，使 Lovable 能够无缝利用 Supabase 的后端服务。

使用 Supabase 简化应用的身份验证

实现安全的身份验证至关重要。通过 Lovable 的 AI 表单构建器和 Supabase 集成，您可以轻松创建稳健的登录和注册表单。

以下是逐步指南：

  1. 创建 Supabase 账户

    • 访问 Supabase 并注册。
    • 进入仪表板管理项目和数据库。

  2. 将 Supabase 与 Lovable 集成

    • 在 Lovable 中，导航到集成设置。
    • 输入 Supabase 项目 URL 和 API 密钥以建立连接。

  3. 设计身份验证表单

    • 使用 Lovable 的 AI 表单构建器创建直观的登录和注册表单。
    • 自定义 UI 以匹配应用品牌。

  4. 实现身份验证工作流

    • 设置 Supabase Edge Functions 处理任务，如令牌验证和用户会话。
    • 确保用户凭证安全存储并管理会话持久性。

  5. 启用电子邮件验证

    • 配置 Supabase 在用户注册时发送验证电子邮件。
    • 这为用户身份添加额外安全层。

  6. 测试并部署

    • 彻底测试身份验证流程，确保顺畅的用户体验。
    • 完成后自信部署应用。

了解更多 Supabase 信息。

Supabase Edge Functions

利用 Supabase Edge Functions 轻松增强应用，添加 AI 功能、支付和电子邮件集成。遵循此指南在 Lovable 上构建首个全栈应用：

您可以添加 AI 功能，例如：

向应用添加支付功能

多种方式将 Stripe 连接到 Lovable，其中最简单的是使用 Stripe 的内置支付链接。查看此资源确保正确设置！

使用 Resend 添加电子邮件功能

部署与发布您的项目​

设置 SEO

查看 文档的此部分 以确保所有 SEO 功能正确启用。

添加自定义域名

您可以使用以下方式添加自定义域名：

  • Entri（Lovable 原生）
  • Netlify
  • Vercel
  • Namecheap
    查看 文档的此部分 以获取更多信息。
发布我的项目

项目准备就绪后，发布它以生成可共享 URL。这便于展示应用或与协作者分享。

参考 文档的此部分 以获取更多信息。