5 分钟上手指引
本文是一份"从 0 到 1"的操作手册，带你完成第一个集成开发项目。
前置条件
信息
- 已经在【Lovrabet 工作台】 完成了 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(() => {
// 使用 SDK 获取数据
lovrabetClient.models.orders
.filter({
pageSize: 100,
})
.then((res) => {
setData(res.tableData);
});
}, []);
return (
<div>
<h1>数据大屏</h1>
<p>共 {data.length} 条订单</p>
{/* 你的自定义 UI */}
</div>
);
}
菜单名称
注意顶部的 Title: 数据大屏 注释，这会在同步菜单时自动提取为菜单名称。
第五步：构建并部署
# 构建生产版本
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 会：
- 扫描你本地的页面
- 对比 Lovrabet 工作台现有菜单
- 提示你选择要同步的页面
- 让你输入 JS/CSS 的 CDN 链接
菜单名称 本地 线上
数据大屏 ✓ ✗ (需要创建)
* 请选择要同步的菜单:
[✓] 数据大屏
* JS 链接: https://cdn.example.com/assets/index.js
* CSS 链接: https://cdn.example.com/assets/index.css
√ 菜单创建完成
现在打开 Lovrabet 工作台，就能在菜单中看到"数据大屏"了！
后续迭代：更新资源
当你修改代码、重新构建后，资源文件地址会变化（如 index-v1.js → index-v2.js）。
使用以下命令批量更新已同步菜单的资源链接：
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",
});