擎路脚手架生成器 (Qinglu CLI)

企业级前端项目脚手架生成器，支持 React 和 Vue 框架，提供完整的工程化配置。

功能特性

• 🚀 多框架支持: React 18.x + Vue 3.x
• 📦 交互式 CLI: 命令行问答式配置
• 🔧 插件化架构: 可扩展的预设功能模块
• ⚡ 工程化标配: 内置路由管理、状态管理、请求管理、组件库、预处理器、打包配置、测试框架、代码检测等
• 🎨 现代化技术栈: TypeScript、ESLint、Prettier、Tailwind CSS
• 📱 响应式设计: 支持桌面端(React + Antd)和移动端(Vue + Vant)
• 🌍 多环境支持: 内置完整的多环境配置管理方案

技术栈

React 项目模板

• React 18.x - 用户界面库
• React Router 6.x - 路由管理
• Jotai 2.x - 状态管理
• Ant Design 5.x - UI 组件库
• Axios 1.x - HTTP 请求库
• Webpack 5.x - 构建工具
• Jest 29.x - 测试框架
• TypeScript 4.x - 类型安全

Vue 项目模板

• Vue 3.x - 渐进式框架
• Vue Router 4.x - 路由管理
• Pinia 2.x - 状态管理
• Vant 4.x - 移动端 UI 组件库
• Axios 1.x - HTTP 请求库
• Vite 3.x - 构建工具
• Vitest 3.x - 测试框架
• TypeScript 4.x - 类型安全

通用工具

• ESLint + Prettier - 代码质量工具
• Lint-staged - Git 提交钩子
• Tailwind CSS - 原子化 CSS 框架
• PostCSS + Less/Sass - CSS 预处理器
• Cross-env - 跨平台环境变量设置

快速开始

安装依赖

npm install

使用脚手架

# 交互式创建项目
node bin/index.js

# 或者指定项目名称
node bin/index.js my-project

# 指定框架创建
node bin/index.js my-react-app --framework react
node bin/index.js my-vue-app --framework vue

全局安装（可选）

npm install -g .
qinglu-cli my-project

使用示例

1. 创建 React 项目

node bin/index.js my-react-app --framework react
cd my-react-app
npm install
npm run dev

2. 创建 Vue 项目

node bin/index.js my-vue-app --framework vue
cd my-vue-app
npm install
npm run dev

项目结构

生成的项目将包含以下结构：

React 项目

my-react-app/
├── public/
│   └── index.html
├── src/
│   ├── config/
│   │   └── config.ts
│   ├── api/
│   │   ├── request.ts
│   │   ├── user.ts
│   │   └── index.ts
│   ├── components/
│   │   └── Layout.tsx
│   ├── pages/
│   │   ├── HomePage.tsx
│   │   └── AboutPage.tsx
│   ├── store/
│   │   └── atoms.ts
│   ├── __tests__/
│   │   └── App.test.tsx
│   ├── App.tsx
│   ├── App.less
│   ├── index.tsx
│   └── index.css
├── webpack.config.js
├── tsconfig.json
├── .eslintrc.json
├── .prettierrc.json
├── tailwind.config.js
├── postcss.config.js
└── package.json

Vue 项目

my-vue-app/
├── src/
│   ├── config/
│   │   └── config.ts
│   ├── api/
│   │   ├── request.ts
│   │   ├── user.ts
│   │   └── index.ts
│   ├── views/
│   │   ├── HomePage.vue
│   │   └── AboutPage.vue
│   ├── stores/
│   │   └── counter.ts
│   ├── router/
│   │   └── index.ts
│   ├── __tests__/
│   │   └── HomePage.test.ts
│   ├── App.vue
│   ├── main.ts
│   └── style.css
├── index.html
├── vite.config.ts
├── vitest.config.ts
├── tsconfig.json
├── tsconfig.node.json
├── .eslintrc.json
├── .prettierrc.json
├── tailwind.config.js
├── postcss.config.js
└── package.json

可选功能

在创建项目时，可以选择以下功能：

• ✅ TypeScript - 默认启用
• ✅ ESLint + Prettier - 默认启用
• ✅ Lint-staged - 默认启用
• ✅ Jest/Vitest - 默认启用
• ⚪ E2E 测试 - 可选
• ✅ Tailwind CSS - 默认启用
• 🎨 CSS 预处理器 - Less/Sass/Stylus/原生 CSS

内置功能

环境配置

生成的项目内置完整的多环境配置管理：

支持的环境

• dev - 日常迭代环境
• bugfix - bug 修复环境
• ultra - ultra 项目环境
• beyond - beyond 项目环境
• stable - 公共环境
• pro - pro 项目环境
• promax - promax 项目环境
• prod - 正式环境

环境命令

每个生成的项目都会包含以下环境相关命令：

# 开发命令
npm run dev:dev      # 日常迭代环境
npm run dev:bugfix   # bug修复环境
npm run dev:ultra    # ultra项目环境
npm run dev:beyond   # beyond项目环境
npm run dev:stable   # 公共环境
npm run dev:pro      # pro项目环境
npm run dev:promax   # promax项目环境
npm run dev:prod     # 正式环境

API 请求管理

每个项目都内置了完整的 Axios 请求封装：

特性

• 自动 Token 管理: 自动从 localStorage 读取并添加到请求头
• 请求/响应拦截: 统一处理请求和响应
• 错误处理: 自动处理网络错误和业务错误
• 状态码处理: 针对不同 HTTP 状态码的专门处理
• 超时控制: 默认 10 秒请求超时
• 类型安全: 完整的 TypeScript 类型定义

目录结构

src/api/
├── request.ts     # axios实例配置和拦截器
├── user.ts        # 用户相关API示例
├── index.ts       # API统一导出
└── ...            # 其他业务模块API

使用示例

// 使用预定义的API
import { userApi } from "./api";
const response = await userApi.getUserInfo();

// 直接使用axios实例
import { api } from "./api";
const result = await api.get("/user/profile");

开发命令

生成的项目包含以下命令：

# 基础命令
npm run dev          # 默认开发模式
npm run build        # 默认生产构建
npm run test         # 运行测试
npm run lint         # 代码检查
npm run lint:fix     # 自动修复代码
npm run format       # 格式化代码

# 环境特定命令（见上方环境配置章节）
npm run dev:环境名    # 指定环境开发

贡献指南

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

许可证

本项目使用 MIT 许可证 - 查看 LICENSE 文件了解详情

支持

如果这个项目对你有帮助，请给它一个 ⭐

基于擎路脚手架生成 🚀