GenAuth CLI 使用说明

GenAuth CLI 是一个命令行工具，用于快速创建和管理基于 GenAuth Guard 的项目。它支持 React 和 Vue3 框架，可以帮助开发者快速搭建带有认证功能的应用。

特性

• 🚀 快速创建项目，自动配置开发环境
• 🎨 支持 React/Vue3/Angular 等主流前端框架
• 🔒 内置 GenAuth Guard 认证方案
• 🎯 支持嵌套 Guard 登录组件和纯自定义登录页面两种模式
• 🛠️ 集成主流 UI 框架（Ant Design/Element Plus）
• 🤖 内置 AI 助手，通过自然语言交互式地为用户生成 GenAI 应用的登录页面

安装

npm install genauth-cli -g

快速开始

1. 创建新项目：

genauth-cli init

2. 进入项目目录：

cd your-project-name

3. 启动开发服务器：

npm run dev

详细命令

1. 初始化项目 (init)

创建一个新的 GenAuth Guard 项目。

genauth-cli init

交互式配置选项：

• 项目名称（默认：my-project）
• 框架选择
  • React（支持 React 18）
  • Vue3（支持 Vue 3.x）
• 开发模式
  • GenAuth Guard（由 GenAuth 提供的可嵌入登录组件）
  • Custom Login Page（自定义登录页面）
• UI 框架（仅当选择 Custom Login Page 时可用）
  • Ant Design：React 生态的企业级 UI 框架
  • Element Plus：Vue3 生态的企业级 UI 框架

执行后会：

1. 创建项目目录
2. 复制对应模板文件
3. 配置 package.json
4. 安装依赖
5. 保存项目配置

2. 构建指南 (build)

显示项目迁移指南，帮助开发者集成 GenAuth Guard。

genauth-cli build

根据项目类型显示不同的迁移步骤：

React + GenAuth Guard:

1. 安装 @genauth/guard-react18
2. 使用 GuardProvider 包装 App 组件
3. 复制登录页面代码

Vue3 + GenAuth Guard:

1. 安装 @genauth/guard-vue3
2. 添加 createGuard 到 Vue 应用
3. 复制登录页面代码

React/Vue3 + Custom Login Page:

1. 安装对应的 Guard 包
2. 复制登录页面代码

3. AI 助手 (magic)

提供 AI 辅助功能，帮助解决开发过程中的问题（目前处于开发阶段）。

genauth-cli magic

项目结构

初始化后的项目结构会根据选择的框架和类型有所不同：

my-project/
├── src/
│ ├── components/
│ │ └── Login.(tsx|vue) # 登录组件
│ ├── App.(tsx|vue) # 主应用
│ └── main.(tsx|ts) # 入口文件
├── package.json
└── ...配置文件