快速开始

本节面向“想接入 G2rain 的微前端子应用开发者”，从脚手架创建工程、到本地运行、再到权限/路由与代码生成。

1. 创建子应用

G2rain 提供 CLI：create-g2rain-app（基于 g2rain-app-template）。

# 直接交互式创建
npm create g2rain-app@latest

# 指定项目名
npm create g2rain-app@latest my-app-name

如果模板不是默认路径，可以使用环境变量 G2RAIN_TEMPLATE_PATH 指向你克隆/下载的 g2rain-app-template 目录。

2. 安装依赖并启动

cd my-app-name
npm install
npm run dev

模板项目会启动在 http://localhost:3001（端口可通过 VITE_SERVER_PORT 调整）。

3. 配置环境变量

在项目根目录创建 .env（或 .env.local），至少包含以下变量（模板同名字段）：

VITE_APPLICATION_CODE=g2rain-test-app
VITE_CONTEXT_PATH=/test

VITE_BACKEND_ORIGIN=http://localhost:8080
VITE_IAM_BACKEND_ORIGIN=http://localhost:8080

VITE_SSO_BASE_URL=http://localhost:8080
VITE_AUTH_END_POINT=/auth/authorize
VITE_REDIRECT_URI=/sso_callback
VITE_TOKEN_END_POINT=/auth/token

VITE_MOCK_ENABLED=true
VITE_SERVER_PORT=3001

其中：

• VITE_APPLICATION_CODE：决定前端从资源接口加载的“应用维度资源”（路由与权限配置）。
• VITE_MOCK_ENABLED：本地开发时启用 mock（方便先跑通流程）。

4. 体验“资源权限 + 动态路由”

模板在启动时会初始化应用资源，并根据 resource_page / resource_page_element / resource_api_endpoint 等资源生成路由与权限行为。

前端权限通过：

• 页面元素权限：v-permission="'user:add'" 等指令控制按钮/菜单显示与可点击性。
• API 权限：HTTP 拦截器在发起请求前校验权限（不足则抛出 API_PERMISSION_DENIED）。

5. 代码生成（可选，但强烈推荐）

模板工程内置代码生成器与配置生成器：

# 生成 CRUD 页面、API、Mock、Type（示例：生成 dict 表）
npm run build:generate -- --tables=dict

# 从已有代码提取资源配置，生成 pages/api 等 JSON
npm run build:config

如果你希望我把“生成前后会改哪些文件/如何同步到后端数据库”也写成官网章节，可以告诉我你们 README 中对应的表单/资源 JSON 字段名（或直接给文章清单）。