1.0.0-rc.0 • Published 3 months ago
genauth-cli v1.0.0-rc.0
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
快速开始
- 创建新项目:
genauth-cli init
- 进入项目目录:
cd your-project-name
- 启动开发服务器:
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 框架
执行后会:
- 创建项目目录
- 复制对应模板文件
- 配置 package.json
- 安装依赖
- 保存项目配置
2. 构建指南 (build
)
显示项目迁移指南,帮助开发者集成 GenAuth Guard。
genauth-cli build
根据项目类型显示不同的迁移步骤:
React + GenAuth Guard:
- 安装 @genauth/guard-react18
- 使用 GuardProvider 包装 App 组件
- 复制登录页面代码
Vue3 + GenAuth Guard:
- 安装 @genauth/guard-vue3
- 添加 createGuard 到 Vue 应用
- 复制登录页面代码
React/Vue3 + Custom Login Page:
- 安装对应的 Guard 包
- 复制登录页面代码
3. AI 助手 (magic
)
提供 AI 辅助功能,帮助解决开发过程中的问题(目前处于开发阶段)。
genauth-cli magic
项目结构
初始化后的项目结构会根据选择的框架和类型有所不同:
my-project/
├── src/
│ ├── components/
│ │ └── Login.(tsx|vue) # 登录组件
│ ├── App.(tsx|vue) # 主应用
│ └── main.(tsx|ts) # 入口文件
├── package.json
└── ...配置文件
1.0.0-rc.0
3 months ago