5 分钟上手：创建第一个项目
这是一份从零到一的操作手册，跟着做，你就能完成第一个集成开发项目。
AI 辅助开发（推荐）
没有 rabetbase，从零搭建一个 CRM 不只是"写前端代码"的问题——你需要：搭前端项目（React + 路由 + 状态管理），搭后端项目（Spring Boot / Laravel / Express + 数据库连接 + ORM），写 API 接口（每个 CRUD 操作一个接口），实现认证（JWT？Session？Cookie？），配跨域，前后端联调（字段名对齐、数据格式对齐、错误码对齐），前端部署到 CDN，后端部署到服务器（买机器、装环境、配 nginx/apache、加 SSL、设进程守护）。这些做完了，还没开始写业务功能。一个全栈开发搞了 3 周，还在调登录接口。
有了 rabetbase：rabetbase project create 一条命令，CLI 自动生成标准项目结构（路由、SDK client、TypeScript 类型、微前端生命周期、构建配置全部就位）。BaaS 提供数据库、API、SDK、认证、企业级权限——后端全不用写。api pull 生成类型安全 SDK，menu sync 把页面注册到主应用菜单。不用搭后端、不用买服务器、不用配 CORS、不用联调。10 分钟，项目能跑、能查数据、能集成进主系统。
你只需告诉 AI
在 Claude Code 中输入：
用 rabetbase CLI 帮我从零创建一个 CRM 项目，安装好依赖，拉取 API 配置，然后创建一个客户列表页，展示客户姓名、电话、公司、状态，从客户数据集读取数据。
AI 会做什么
AI 会使用 rabetbase CLI 自动完成以下工作：
- 安装并登录 CLI（
rabetbase auth login） - 创建项目并安装依赖（
rabetbase project create） - 拉取 API 配置（
rabetbase api pull） - 生成客户列表页面组件
- 启动开发服务（
rabetbase run start）
完成后浏览器打开 http://localhost:5173 即可看到页面。下方是手动操作的完整步骤。
🔧 手动操作（完整步骤）
开始之前
- 已经在 Lovrabet 工作台 创建了应用工程
- 通过连接数据库或需求描述，完成了应用的自动生成
第一步：安装 CLI 并登录
当前版本: 
# 全局安装 CLI（只需执行一次）
npm install -g @lovrabet/rabetbase-cli@latest
# 登录你的 Lovrabet 账号
rabetbase auth login
执行 rabetbase auth login 后，浏览器会自动打开登录页面。登录成功后，CLI 会记住你的身份。
运行 rabetbase --version 查看版本号，确认安装成功。
第二步：创建项目
rabetbase project create
CLI 会引导你填写项目信息：
* 项目名: my-crm
* 应用 AppCode [可选]: app-c4c89304
✔ 复制项目文件
✔ 更新项目配置
✔ 安装 npm 依赖
✔ 拉取 API 配置
🎉 项目创建成功！
cd my-crm
rabetbase run start
AppCode 在 Lovrabet 工作台的应用设置页面可以找到。
第三步：启动开发服务
cd my-crm
rabetbase run 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 会自动提取它作为菜单名称。
第五步：构建并部署
rabetbase run build
构建产物在 dist/ 目录，包含 index.js 和 index.css 两个文件。把它们部署到你的 CDN 或服务器，拿到 HTTPS 链接：
https://cdn.example.com/assets/index.jshttps://cdn.example.com/assets/index.css
第六步：同步菜单到工作台
rabetbase menu sync
CLI 会自动扫描你本地的页面，和工作台现有菜单做对比，提示你选择要同步的页面：
菜单名称 本地 线上
数据大屏 ✓ ✗ (需要创建)
* 请选择要同步的菜单:
[✓] 数据大屏
* JS 链接: https://cdn.example.com/assets/index.js
* CSS 链接: https://cdn.example.com/assets/index.css
√ 菜单创建完成
现在打开 Lovrabet 工作台，菜单里就能看到"数据大屏"了。
后续迭代
修改代码、重新构建后，资源文件地址可能会变化。用以下命令批量更新已同步菜单的资源链接：
rabetbase menu update
整体流程回顾
1. 安装 CLI npm install -g @lovrabet/rabetbase-cli@latest
2. 登录 rabetbase auth login
3. 创建项目 rabetbase project create
4. 开发调试 rabetbase run start
5. 构建 rabetbase run build
6. 部署到 CDN （上传 dist/ 文件）
7. 同步菜单 rabetbase menu sync
8. 后续更新 rabetbase 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",
});