Lovable.dev 入门：从想法到应用

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

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

## 前提条件

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

1. **一个 Lovable.dev 账户** – 在 [lovable.dev](https://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`（森林绿）：

```css

:root {

--primary: #2D6A4F;

--primary-hover: #1B4332;

}

```

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

## 第四步：添加用户认证

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

```

添加用户认证，包含：

- 注册页面（姓名、邮箱、密码）

- 登录页面

- 通过电子邮件重置密码

- 保护仪表盘路由，仅允许登录用户访问

- 使用 Supabase 作为后端

```

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