quick-project-starter

快速创建前端项目的脚手架工具

一个简单易用的命令行工具，用于快速搭建现代化的前端项目。

✨ 特性

• 🎯 多框架支持 - Vue 3 / React 18
• 🔧 多打包工具 - Vite / Webpack 可选
• 📦 组件库集成 - 自动配置主流 UI 组件库
• 🇨🇳 开箱即用 - 预配置 Router、i18n、主题系统
• 🛠️ 工具链完整 - ESLint、Prettier、TypeScript
• 📦 可选 Axios - 封装好的请求库，支持拦截器和文件上传下载

📦 支持的组件库

Vue

| 组件库 | 说明 | |--------|------| | Element Plus | Vue 3 组件库 | | Ant Design Vue | Ant Design 的 Vue 实现 | | Naive UI | 比较现代的 Vue 3 UI 库 | | Arco Design Vue | 字节跳动出品 | | Vuetify | Material Design 风格 |

React

| 组件库 | 说明 | |--------|------| | Ant Design | 蚂蚁集团企业级 UI | | Material-UI (MUI) | React Material Design | | Arco Design React | 字节跳动出品 | | Chakra UI | 简单易用的 React 组件库 |

🚀 快速开始

安装

npm install -g quick-project-starter
# 或
pnpm add -g quick-project-starter

创建项目

# 交互式创建
quick-project-starter

# 指定项目名称
quick-project-starter my-app

创建选项

运行命令后，会依次询问：

1. 项目名称 - 如未在命令中指定
2. 编程语言 - TypeScript / JavaScript
3. 框架 - Vue / React
4. 组件库 - 选择要集成的 UI 库（可选）
5. ESLint - 是否添加代码检查
6. Prettier - 是否添加代码格式化
7. 打包工具 - Vite / Webpack
8. 国际化 - 是否添加 i18n 支持
9. Axios - 是否添加 HTTP 请求库

📁 生成的项目结构

my-app/
├── src/
│   ├── api/           # API 接口
│   ├── assets/        # 静态资源
│   ├── components/    # 公共组件
│   ├── composables/   # Vue 组合式函数
│   ├── config/        # 配置文件
│   ├── layout/        # 布局组件
│   ├── plugins/       # 插件
│   ├── router/        # 路由配置
│   ├── stores/        # 状态管理
│   ├── utils/         # 工具函数
│   ├── views/         # 页面组件
│   ├── App.vue/App.jsx # 根组件
│   └── main.ts/main.tsx # 入口文件
├── public/            # 公共资源
├── .env               # 环境变量
├── vite.config.js     # Vite 配置（选择 Vite 时）
# 或
├── webpack.config.js  # Webpack 配置（选择 Webpack 时）
└── package.json

💡 使用示例

Vue + TypeScript + Element Plus + Vite

quick-project-starter my-vue-app
# 选择: Vue → TypeScript → Element Plus → yes → yes → Vite → yes → yes → yes

React + JavaScript + Ant Design + Webpack

quick-project-starter my-react-app
# 选择: React → JavaScript → Ant Design → yes → yes → Webpack → yes → yes → yes

🔧 开发命令

# 进入项目目录
cd my-app

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产构建
pnpm preview

注意：如果选择 Webpack，开发命令为 pnpm serve 而非 pnpm dev

📖 Axios 封装说明

如果选择了安装 Axios，会自动配置：

请求拦截器

• 自动添加 Authorization 头（从 localStorage 读取 token）

响应拦截器

• 自动处理 JSON 响应，支持 { code, data, message } 结构
• 自动处理 Blob 响应（文件下载）

使用示例

import { http } from '@/utils/request'

// GET 请求
const users = await http.get<User[]>('/user/list')

// POST 请求
const result = await http.post<LoginResult>('/login', { username, password })

// 文件上传
await http.upload('/upload', formData, (percent) => {
  console.log('上传进度:', percent)
})

// 文件下载
const { data, filename } = await http.download('/export', { id: 123 })

🌐 国际化支持

选择 i18n 后，会自动配置：

• Vue: vue-i18n
• React: react-i18next
• 默认支持中英文切换
• 时区默认设置为中国（Asia/Shanghai）

🎨 主题支持

项目默认包含主题系统：

• 支持亮色/暗色模式切换
• 支持自定义主题色
• CSS 变量实现，易于定制

⚙️ 环境变量

# API 地址
VITE_API_BASE_URL=/api

# 请求超时时间（毫秒）
VITE_REQUEST_TIMEOUT=15000

📝 License

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！