使用 Lovable.dev 入门：从创意到应用

我记得自己曾盯着空白屏幕，试图为自由职业业务搭建一个简单的客户门户。我不是专业开发者——懂一点 HTML 和 CSS，但还不足以构建全栈 Web 应用，这感觉像是不可能完成的任务。就在这时，我发现了 Lovable.dev，它改变了一切。以下是我从创意到工作应用的真实、逐步旅程。

前提条件

在深入之前，你需要准备：

1. 一个 Lovable.dev 账户 – 在 lovable.dev 注册。免费套餐足以构建一个完整的应用。
2. 一个清晰的创意 – 我有一张便利贴写着：“客户门户：登录、仪表盘、发票上传。”这就够了。
3. 对 Web 概念的基本理解 – 你不需要会编码，但知道“按钮”或“表单”是什么会有帮助。
4. GitHub 账户（可选） – 用于版本控制和部署，但开始时不必要。
5. 耐心 – 你的第一个应用不会完美。我的就不完美。

警告： Lovable.dev 很强大，但它不是魔法。你仍然需要思考应用逻辑和用户流程。AI 帮助你构建，但你仍然是架构师。

第一步：开始一个新项目

当我第一次登录时，看到一个简洁的仪表盘。我做了以下操作：

1. 点击右上角的 “新建项目” 按钮。
2. 命名你的项目——我把它命名为“FreelancePortal”。
3. 选择一个模板。我从 “空白应用” 开始，因为我想完全控制。
4. 点击 “创建项目”。

工作区打开后，左侧有一个简单的侧边栏（你的应用结构），右侧有一个预览面板。感觉熟悉，像简化版的 VS Code。

第二步：用提示定义应用

这就是魔法发生的地方。你不需要写代码，而是描述你想要的内容。我在底部的聊天界面中输入：

创建一个名为“FreelancePortal”的 Web 应用，包含：
- 一个登录页面（邮箱 + 密码）
- 一个仪表盘，显示总收入、待处理发票和最近客户
- 一个上传发票的页面（仅限 PDF）
- 页面之间的导航
- 以蓝色为主色调的干净、专业设计

AI 立即开始生成代码。我看着文件在侧边栏中出现：LoginPage.tsx、Dashboard.tsx、InvoiceUpload.tsx。预览面板实时更新。

警告： 提示要具体。我最初说“一个漂亮的仪表盘”，结果得到了一个看起来像 1990 年代电子表格的东西。你提供的细节越多，结果就越好。

第三步：自定义生成的代码

AI 给了我一个坚实的基础，但还需要调整。以下是我完善它的方法：

1. 点击侧边栏中的任何文件，在编辑器中打开它。
2. 在聊天中修改提示 以进行更改。例如，我输入：

   将仪表盘布局改为三列网格。添加一个显示每月收入的图表。
   

3. 直接编辑代码，当我想要精确控制时。我通过编辑 CSS 将主色调从蓝色改为 #2D6A4F（森林绿）：

   :root {
     --primary: #2D6A4F;
     --primary-hover: #1B4332;
   }
   

编辑器支持实时预览，所以每次更改都立即出现在右侧。我花了大约 30 分钟迭代：移动按钮、调整字体大小、添加工具提示。

第四步：添加用户认证

每个应用都需要用户。我通过一个简单的提示添加了认证：

添加用户认证，包含：
- 注册页面（姓名、邮箱、密码）
- 登录页面
- 通过电子邮件重置密码
- 保护仪表盘路由，仅允许登录用户访问
- 使用 Supabase 作为后端

Lovable.dev 自动集成了 Supabase。我看到新文件出现：AuthContext.tsx、`supabaseC