TIP
你已经了解了 Rabetbase 项目工程能做什么，也知道在 Vibe Coding 工具里怎么给 AI 下 prompt。这一篇解决第一步：怎么把项目建起来。
告诉 AI，让它创建项目
在 Claude Code、Codex、Trae 或 Cursor 里打开你准备放项目的目录，直接说：
INFO
直接对 AI 说：
帮我创建一个 Rabetbase 项目。
项目名是 my-project，绑定到应用 app-xxxx，环境用 production。AI 会自动执行 rabetbase project create，生成完整的项目脚手架和配置文件。如果你还不知道要绑哪个应用，先让 AI 帮你查：
帮我看看我账号下有哪些可用的 Lovrabet 应用，列出名称和 appcode。创建完成后，项目根目录下会有一份 .rabetbase.json，记录了绑定的应用和环境。后续所有操作（拉取数据模型、推送 SQL、同步菜单）都默认认这个应用，不用每次重复指定。
INFO
**如果你更习惯自己敲命令：**也可以用 rabetbase project create my-project --appcode app-xxxx --env production。省略参数时 CLI 会交互式引导。已有目录只需补配置的情况用 rabetbase project init 而不是 create。
操作演示
创建后看到什么
执行 rabetbase project create 后，得到一个完整工程目录：
.
├── index.html # 入口 HTML（CDN 依赖声明）
├── package.json # 项目依赖与脚本
├── vite.config.ts # Vite 构建 + 微前端配置
├── tsconfig.json # TypeScript 配置
├── .rabetbase.json # 项目配置（AppCode、环境）
├── docs/
│ ├── quick-start.md # 快速开始指南
│ └── API_RULE_CHANGE.md # API 变更说明
├── public/
│ ├── logo.svg
│ └── vite.svg
└── src/
├── main.tsx # 微前端入口（导出 mount/unmount）
├── style.css # 全局样式
├── api/
│ ├── api.ts # CLI 生成的 SDK 模型配置
│ └── client.ts # 统一导出的 SDK 客户端实例
├── layouts/
│ └── MainLayout.tsx # 主布局（侧边栏/头部/面包屑）
├── pages/
│ ├── index.tsx # / — 首页：项目概述 + 开发指引
│ ├── sdk-demo/index.tsx # /sdk-demo — SDK CRUD 操作示例
│ ├── sdk-bff/index.tsx # /sdk-bff — Backend Function 示例
│ ├── sdk-sql/index.tsx # /sdk-sql — SQL 查询示例
│ ├── sdk-aggregate/index.tsx # /sdk-aggregate — 聚合查询示例
│ ├── sdk-health/index.tsx # /sdk-health — 连接状态检查
│ ├── workbench/index.tsx # /workbench — 工作台页面示例
│ ├── dashboard/index.tsx # /dashboard — 数据看板示例
│ └── data-screen/index.tsx # /data-screen — 数据大屏示例
├── router/
│ └── index.tsx # React Router + icestark basename
└── utils/
├── api.ts # API 请求封装
└── sdk-test-utils.ts # SDK 测试工具技术栈：
| 层级 | 技术 |
|---|---|
| 前端框架 | React 18 + TypeScript |
| 构建工具 | Vite 7 |
| 路由 | React Router v6 + vite-plugin-pages（约定式路由） |
| UI 组件 | Ant Design v5 |
| 微前端 | @ice/stark-app（icestark） |
| 平台 SDK | @lovrabet/sdk |
| 图表 | ECharts + echarts-for-react |
工程自带示例页面，创建后可本地预览：
| 页面 | 路由 | 展示内容 |
|---|---|---|
| 首页 | / | 项目概述、MCP 配置、CLI 命令、文档链接 |
| SDK 演示 | /sdk-demo | 模型列表、CRUD 操作（filter/create/update/delete） |
| BFF 示例 | /sdk-bff | Backend Function 调用演示 |
| SQL 示例 | /sdk-sql | 自定义 SQL 查询演示 |
| 聚合查询 | /sdk-aggregate | 聚合统计查询演示 |
| 健康检查 | /sdk-health | SDK 连接状态检查 |
| 工作台 | /workbench | 统计卡片、任务列表、进度跟踪 |
| 数据看板 | /dashboard | 图表和指标展示 |
| 数据大屏 | /data-screen | 全屏数据展示 |
创建后能开发什么
项目搭好后，下面这些都能在这个工程里做：
| 类别 | 说明 |
|---|---|
| 自定义前端页面 | 工作台、看板、大屏、复杂表单、跨数据集页面，基于 React + SDK 开发 |
| 智能列表页 | 标准增删改查页面，AI 自动生成四件套（列表/新建/编辑/详情） |
| Backend Function | 封装校验、事务、多表写入、脱敏、外部系统集成 |
| 自定义 SQL | 复杂查询、统计报表、联表聚合 |
| 数据接口调用 | SDK 客户端自动生成，import 即用 |
不管开发哪一类，流程都一样：摸清数据模型 → 开发 → 本地预览 → 构建 → 接入主应用。每一步的 prompt 参考 在 Vibe Coding 工具中用 Rabetbase。
本地跑起来看看
项目建好后，让 AI 帮你启动：
INFO
直接对 AI 说：
启动当前项目的本地开发环境，告诉我访问地址。默认访问 https://dev.lovrabet.com:5173。如果端口被占用，AI 会自动帮你换端口。
构建生产包：
帮我做一次生产构建，检查 dist 目录和产物是否正常。下一步
项目建好了、本地跑通了。下一步让 AI 把平台数据模型拉到本地，把数据集字段和关联关系都摸清楚——见 API 与数据集：拉配置、看清数据。