5 分钟上手：创建第一个项目
这是一份从零到一的操作手册，跟着做，你就能完成第一个集成开发项目。
开始之前
前置条件
- 已经在 Lovrabet 工作台 创建了应用工程
- 通过连接数据库或需求描述，完成了应用的自动生成
第一步：安装 CLI 并登录
当前版本: 
# 全局安装 CLI（只需执行一次）
npm install -g @lovrabet/cli
# 登录你的 Lovrabet 账号
lovrabet auth
执行 lovrabet auth 后，浏览器会自动打开登录页面。登录成功后，CLI 会记住你的身份。
验证安装
运行 lovrabet --version 查看版本号，确认安装成功。
第二步：创建项目
lovrabet create
CLI 会引导你填写项目信息：
* 项目名: my-crm
* 应用 AppCode [可选]: app-c4c89304
✔ 复制项目文件
✔ 更新项目配置
✔ 安装 npm 依赖
✔ 拉取 API 配置
🎉 项目创建成功！
cd my-crm
lovrabet start
AppCode 在 Lovrabet 工作台的应用设置页面可以找到。
第三步：启动开发服务
cd my-crm
lovrabet start
浏览器会自动打开 http://localhost:5173，你可以看到项目的初始页面。
第四步：写一个页面
在 src/pages/ 目录下创建你的第一个页面：
// src/pages/dashboard.tsx
/**
* Title: 数据大屏
*/
import { useEffect, useState } from "react";
import { lovrabetClient } from "../api/client";
export default function Dashboard() {
const [data, setData] = useState([]);
useEffect(() => {
lovrabetClient.models.orders
.filter({
pageSize: 100,
})
.then((res) => {
setData(res.tableData);
});
}, []);
return (
<div>
<h1>数据大屏</h1>
<p>共 {data.length} 条订单</p>
{/* 你的自定义 UI */}
</div>
);
}
菜单名称
注意顶部的 Title: 数据大屏 注释——同步菜单时，CLI 会自动提取它作为菜单名称。
第五步：构建并部署
lovrabet build
构建产物在 dist/ 目录，包含 index.js 和 index.css 两个文件。把它们部署到你的 CDN 或服务器，拿到 HTTPS 链接：
https://cdn.example.com/assets/index.jshttps://cdn.example.com/assets/index.css
第六步：同步菜单到工作台
lovrabet menu sync
CLI 会自动扫描你本地的页面，和工作台现有菜单做对比，提示你选择要同步的页面：
菜单名称 本地 线上
数据大屏 ✓ ✗ (需要创建)
* 请选择要同步的菜单:
[✓] 数据大屏
* JS 链接: https://cdn.example.com/assets/index.js
* CSS 链接: https://cdn.example.com/assets/index.css
√ 菜单创建完成
现在打开 Lovrabet 工作台，菜单里就能看到"数据大屏"了。
后续迭代
修改代码、重新构建后，资源文件地址可能会变化。用以下命令批量更新已同步菜单的资源链接：
lovrabet menu update
整体流程回顾
1. 安装 CLI npm install -g @lovrabet/cli
2. 登录 lovrabet auth
3. 创建项目 lovrabet create
4. 开发调试 lovrabet start
5. 构建 lovrabet build
6. 部署到 CDN （上传 dist/ 文件）
7. 同步菜单 lovrabet menu sync
8. 后续更新 lovrabet menu update
常见问题
Q: 如何获取 AppCode？
在 Lovrabet 工作台 → 应用设置 → 基本信息中可以找到。
Q: 没有 CDN 怎么办？
可以用阿里云/腾讯云 OSS、自己的服务器（需配置 HTTPS），或者 Vercel、Netlify 等免费托管服务。
Q: 页面数据怎么获取？
使用项目中自动生成的 SDK 客户端：
import { lovrabetClient } from "../api/client";
// 查询数据
const result = await lovrabetClient.models.customers.filter({
where: { status: { $eq: "active" } },
pageSize: 20,
});
// 创建数据
await lovrabetClient.models.customers.create({
name: "张三",
phone: "13800138000",
});