Skip to content

Commit 895bce4

Browse files
committed
更新快速入门文档,添加CLI使用方法和示例
1 parent 0283ee2 commit 895bce4

File tree

2 files changed

+119
-2
lines changed

2 files changed

+119
-2
lines changed

docs/guide/cli.md

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# Object UI CLI
2+
3+
The Object UI CLI allows you to rapidly prototype, develop, and build applications completely from JSON/YAML schemas, without manually setting up a React project.
4+
5+
## Installation
6+
7+
You can run the CLI directly using `npx` (recommended) or install it globally.
8+
9+
### Using npx (Recommended)
10+
11+
```bash
12+
npx @object-ui/cli init my-app
13+
```
14+
15+
### Global Install
16+
17+
```bash
18+
npm install -g @object-ui/cli
19+
# or
20+
pnpm add -g @object-ui/cli
21+
```
22+
23+
## Quick Start
24+
25+
### 1. Initialize a new project
26+
27+
The `init` command creates a new folder with a ready-to-use template.
28+
29+
```bash
30+
npx @object-ui/cli init my-app
31+
```
32+
33+
You can choose from different templates:
34+
35+
* **simple**: Minimal configuration.
36+
* **dashboard**: A full admin dashboard layout (default).
37+
* **form**: A comprehensive form example.
38+
39+
```bash
40+
npx @object-ui/cli init my-app --template dashboard
41+
```
42+
43+
### 2. Start Development
44+
45+
Navigate to your folder and start the dev server. It watches your JSON files and hot-reloads the browser.
46+
47+
```bash
48+
cd my-app
49+
npx @object-ui/cli dev app.json
50+
```
51+
52+
Now you can edit `app.json` or any linked pages, and see changes instantly.
53+
54+
### 3. Build for Production
55+
56+
When you are ready to deploy, build your app into static HTML/JS/CSS assets.
57+
58+
```bash
59+
npx @object-ui/cli build app.json --out-dir dist
60+
```
61+
62+
You can then serve the `dist` folder with any static web server (Nginx, Vercel, Netlify, etc.).
63+
64+
## Command Reference
65+
66+
### `init`
67+
68+
Scaffolds a new project.
69+
70+
```bash
71+
objectui init <name> [options]
72+
```
73+
74+
* `--template, -t`: Template name (`simple`, `form`, `dashboard`).
75+
76+
### `dev`
77+
78+
Starts the development server.
79+
80+
```bash
81+
objectui dev [schema] [options]
82+
```
83+
84+
* `[schema]`: Entry point file (default: `app.json`).
85+
* `--port, -p`: Port number (default: `3000`).
86+
* `--no-open`: Don't open browser automatically.
87+
88+
### `build`
89+
90+
Builds the static application.
91+
92+
```bash
93+
objectui build [schema] [options]
94+
```
95+
96+
* `[schema]`: Entry point file (default: `app.json`).
97+
* `--out-dir, -o`: Output directory (default: `dist`).
98+
* `--clean`: Empty output directory before building.

docs/guide/quick-start.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
11
# Quick Start
22

3-
Let's build your first schema-driven interface in 5 minutes.
3+
You can use Object UI in two ways: via the **CLI** (for rapid schema-driven apps) or as a **React Library** (for valid existing projects).
44

5-
## The Hello World
5+
## Method A: The CLI Way (Fastest)
6+
7+
Perfect for building dashboards, admin panels, and prototypes without writing React code.
8+
9+
```bash
10+
# 1. Scaffolding a new project
11+
npx @object-ui/cli init my-admin --template dashboard
12+
13+
# 2. Start the engine
14+
cd my-admin
15+
npx @object-ui/cli dev
16+
```
17+
18+
That's it! Open `app.json` to start editing your UI.
19+
20+
## Method B: The React Library Way
21+
22+
Let's integrate Object UI into an existing React project.
23+
24+
### The Hello World
625

726
Create a new file `src/App.tsx`. We will define a simple login form using JSON.
827

0 commit comments

Comments
 (0)