> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 快速上手

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

<div id="overview-of-lovable">
  ## Lovable 概览
</div>

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

<img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/lovable-dashboard.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=9740705cec0501ed75b6bddb02ad9dd1" alt="Lovable 控制台 Pn" width="2376" height="1748" data-path="images/lovable-dashboard.png" />

<div id="the-lovable-platform-overview">
  ### Lovable 平台概览
</div>

<AccordionGroup>
  <Accordion title="创建你的第一个项目">
    <Steps>
      <Step title="步骤 1">
        要开始使用，请前往 [lovable.dev](https://lovable.dev) 并创建一个账号。注册完成后，你就可以创建你的第一个项目了。
      </Step>

      <Step title="步骤 2">
        只需输入一个初始提示来开启流程，剩下的交给 Lovable！这是在 Lovable 中创建任何项目的**起跑台**，你可以在这里立刻将想法变为现实。
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Lovable 仪表盘">
    在 Lovable，一切以简单为先：

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

  <Accordion title="项目概览">
    在 Lovable 中，每个项目都遵循一个结构化的工作流：

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

  <Accordion title="项目设置">
    每个项目的设置都可以帮助你：

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

  <Accordion title="项目快捷访问">
    你始终可以快速访问：

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

<div id="start-your-project">
  ### 开始你的项目
</div>

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

<AccordionGroup>
  <Accordion title="提示">
    Lovable 的基于提示的系统让创建应用变得简单。

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

    <Info>
      示例：

      *"Create a dashboard with user login, monthly sales in a line chart, and customer demographics in a pie chart."*
    </Info>
  </Accordion>

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

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

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

  <Accordion title="使用草图">
    <Steps>
      <Step title="步骤 1">
        使用 [**Excalidraw**](https://excalidraw.com/) 或其他类似工具来绘制你的 UI 草图。
      </Step>

      <Step title="步骤 2">
        给你的草图截图，然后将其粘贴或拖放到 Lovable 中。平台会把你的草图转换为可运行的代码。
      </Step>
    </Steps>

    [点击这里了解更多信息。](https://www.youtube.com/watch?v=c0zhLzcVJRI)
  </Accordion>

  <Accordion title="克隆网站或应用">
    如果你想复制一个现有网页：

    <Steps>
      <Step title="步骤 1">
        使用 *Cmd+Shift+4*（在 Mac 上）等快捷键，或使用 [GoFullPage Chrome Extension](https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl) 等工具进行截图。
      </Step>

      <Step title="步骤 2">
        将该截图粘贴或拖放到 Lovable 中。Lovable 会在你的项目中重建该网页的结构。
      </Step>
    </Steps>

    [点击这里了解更多信息。](https://www.youtube.com/watch?v=tYDqBMilHkM)
  </Accordion>
</AccordionGroup>

<div id="edit-your-project">
  ### 编辑项目
</div>

<AccordionGroup>
  <Accordion title="向项目添加自定义知识">
    Lovable 中的 [Custom knowledge](/zh/features/knowledge) 充当你项目的**蓝图**，在一个地方组织功能、设计和目标。
  </Accordion>

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

    查看 [Visual Edits](https://docs.lovable.dev/features/visual-edit) 了解更多信息。
  </Accordion>

  <Accordion title="回退更改，或编辑消息后回退以采用不同思路">
    在构建 AI 驱动应用时，速度很重要，但稳定性和可控性同样关键。因此我们升级了版本管理，让变更追踪变得轻而易举。

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

      <Step title="为关键修改加书签">
        通过为重要修改添加书签来整理你的工作，便于稍后查找和再次查看。
      </Step>

      <Step title="直观的版本历史">
        历史记录面板现在的工作方式类似 Google Docs，使变更追踪更加轻松。

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/history.png?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=b0b6b8829cd6db5c9b48c09e7c70aba4" alt="" width="391" height="37" data-path="images/history.png" />

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/CqzNmr5z5kHJD2HH/images/redesign-history.jpeg?fit=max&auto=format&n=CqzNmr5z5kHJD2HH&q=85&s=ff8031e1fe0ac2cf85b22ad5eb26065a" alt="" width="1512" height="982" data-path="images/redesign-history.jpeg" />
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="使用 21st dev 添加动画组件">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/MJ9pB741sXw?si=7vPZVpe0TyHIgTLp" title="YouTube 视频播放器" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

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

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/uaGnrK5Dkkc" title="YouTube 视频播放器" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
  </Accordion>

  <Accordion title="向项目添加新页面">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/h6vnvFKzd0Y?si=cw_zapDQW3hQfVOc" title="YouTube 视频播放器" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

  <Accordion title="重构代码">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/epVlkdNSVrs?si=ufy8WTXkPcpbhkW6" title="YouTube 视频播放器" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
  </Accordion>

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

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/zgNkhU4SYgQ" title="YouTube 视频播放器" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

    查看 [GitHub 集成](https://docs.lovable.dev/integrations/git-integration) 了解更多信息。
  </Accordion>
</AccordionGroup>

<div id="add-fullstack-capabilities-to-your-project">
  ### 为你的项目添加全栈功能
</div>

<AccordionGroup>
  <Accordion title="连接后端">
    如果你需要为应用添加后端功能，你可以：

    * 连接到 Lovable 内置的后端服务 —— [Lovable Cloud](https://docs.lovable.dev/features/cloud)
    * 使用 Lovable 原生的 [Supabase 集成](https://docs.lovable.dev/integrations/supabase)
  </Accordion>

  <Accordion title="使用 Stripe 为应用添加支付功能">
    将 Stripe 连接到 Lovable 的方式有很多，但最直接的方式是使用 Stripe 内置的支付链接。更多信息请参见 [Stripe 集成](https://docs.lovable.dev/integrations/stripe)。
  </Accordion>

  <Accordion title="使用 Resend 添加邮件功能">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/w5Xq-Kvt3J0?si=wdSxtbhg3-uH3NZt" title="YouTube 视频播放器" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />

    更多信息请参见 [Resend 集成](https://docs.lovable.dev/integrations/resend)。
  </Accordion>
</AccordionGroup>

<div id="deploy-and-publish-your-project">
  ### 部署并发布你的项目
</div>

<AccordionGroup>
  <Accordion title="设置 SEO">
    请参照我们的[《实施 SEO 和 GEO 最佳实践》](https://docs.lovable.dev/tips-tricks/seo-geo)指南操作，以获得最佳效果。
  </Accordion>

  <Accordion title="添加自定义域名">
    你可以通过以下服务添加自定义域名：

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

    更多信息参见[自定义域名](https://docs.lovable.dev/features/custom-domain)。
  </Accordion>

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

    <iframe width="100%" height="315" src="https://www.youtube.com/embed/GFtWVXkZDTw" title="YouTube 视频播放器" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

    更多信息参见[发布](https://docs.lovable.dev/features/publish)。
  </Accordion>
</AccordionGroup>
