npm package: @ruan-feiyang/frontend-cli
Description: 前端项目初始化脚手架工具，支持 React 和 Vue 模板
Latest version: 1.0.4

# Frontend CLI Tool v1.0.2

前端项目初始化脚手架工具，支持 React 和 Vue 多种模板，从 Gitee 仓库下载最新模板。

## 📖 目录

- [特性](#-特性)
- [快速开始](#-快速开始)
- [安装](#npm-插件形式使用)
- [使用方法](#使用方法)
- [可用模板](#-可用模板)
- [测试](#-测试)
- [注意事项](#-注意事项)
- [贡献](#-贡献)
- [许可证](#-许可证)

## ✨ 特性

- 🚀 快速初始化 React/Vue 项目
- 📦 支持多种构建工具：Webpack、Rsbuild、Rspack、Vite
- 🔄 自动从 Gitee 仓库获取最新模板
- 🧹 自动清理不需要的文件 (node_modules, .git 等)
- 💾 智能缓存机制，提高下载速度
- 🎨 交互式命令行界面，支持模板选择

## NPM 插件形式使用

```bash
# 全局安装
npm install -g @ruan-feiyang/frontend-cli

# 或使用 npm link 链接本地项目 （开发调试）
cd path/to/front_end_cli
npm link
```

安装后即可全局使用 `frontend-cli` 命令。

## 作为库使用

```bash
npm install @ruan-feiyang/frontend-cli
```

```javascript
const { initProject, listTemplates, TEMPLATES, cleanCache } = require('@ruan-feiyang/frontend-cli');

// 列出所有模板
listTemplates();

// 初始化项目
await initProject('my-app', 'react18-ts-webpack');

// 清理缓存
cleanCache();
```

## 使用方法

### 初始化新项目（交互式）

```bash
frontend-cli init
```

### 初始化指定模板的项目

```bash
# 指定项目名称
frontend-cli init my-app

# 指定模板
frontend-cli init my-app -t react18-ts-webpack

# 强制覆盖已存在的目录
frontend-cli init my-app -f
```

### 列出所有模板

```bash
frontend-cli list
```

### 管理缓存

```bash
# 清理所有缓存
frontend-cli clean

# 显示缓存状态
frontend-cli cache
```

### 显示帮助

```bash
frontend-cli help
```

## 📦 可用模板

### React 模板

| 模板名称 | 描述 | 技术栈 | 推荐场景 |
|---------|------|--------|----------|
| `react17-js-webpack` | React 17 + JavaScript + Webpack | React 17, JavaScript, Webpack 5 | 传统项目，需要兼容性 |
| `react17-ts-webpack` | React 17 + TypeScript + Webpack | React 17, TypeScript, Webpack 5 | 企业级应用，需要类型安全 |
| `react18-js-webpack` | React 18 + JavaScript + Webpack | React 18, JavaScript, Webpack 5 | 现代项目，使用 React 18 新特性 |
| `react18-ts-webpack` | React 18 + TypeScript + Webpack | React 18, TypeScript, Webpack 5 | 现代企业级应用 |
| `react19-ts-rsbuild` | React 19 + TypeScript + Rsbuild | React 19, TypeScript, Rsbuild | **推荐** - 现代快速构建 |
| `react19-ts-rspack` | React 19 + TypeScript + Rspack | React 19, TypeScript, Rspack | 高性能构建，兼容 Webpack 生态 |

### Vue 模板

| 模板名称 | 描述 | 技术栈 | 推荐场景 |
|---------|------|--------|----------|
| `vue2-js-webpack` | Vue 2 + JavaScript + Webpack | Vue 2, JavaScript, Webpack 5 | Vue 2 项目，需要兼容性 |
| `vue3-ts-vite` | Vue 3 + TypeScript + Vite | Vue 3, TypeScript, Vite | **推荐** - 现代 Vue 开发 |

## 🧪 测试

项目包含完善的测试脚本，用于验证 CLI 功能：

### 基本功能测试
```bash
# 运行测试
node test-cli.js

# 测试会验证以下功能：
# 1. 帮助命令 - 验证 CLI 能否正确显示帮助信息
# 2. 列出模板 - 验证模板列表显示正常
# 3. 缓存状态 - 验证缓存管理功能
# 4. 清理缓存 - 验证缓存清理功能
# 5. 无效命令处理 - 验证错误处理机制
```

### 完整功能测试（需要网络）
```bash
# 测试指定模板初始化
node bin/cli.js init test-project -t react18-ts-webpack

# 交互式初始化
node bin/cli.js init test-project

# 注意：完整测试需要网络连接访问 Gitee 仓库
```

### 开发调试
```bash
# 运行本地开发版本
node bin/cli.js

# 查看命令帮助
node bin/cli.js --help
```


## 🚀 快速开始

```bash
# 安装 CLI
npm install -g @ruan-feiyang/frontend-cli

# 查看所有可用模板
frontend-cli list

# 创建新项目（交互式）
frontend-cli init my-app

# 或直接指定模板
frontend-cli init my-app -t react19-ts-rsbuild

# 进入项目并安装依赖
cd my-app
npm install
npm run dev
```

## 📝 注意事项

### 系统要求
- **Node.js**: 版本 >= 14.0.0
- **Git**: 需要安装 Git 用于从 Gitee 克隆模板
- **网络**: 需要网络连接访问 Gitee 仓库

### 使用限制
- 项目名称不能包含特殊字符：`<>:"/\|?*`
- 初始化时会自动移除模板中的 `node_modules`、`dist`、`.git` 等目录
- 目标目录不存在时会自动创建
- 使用 `-f` 参数可以强制覆盖已存在的目录

### 缓存机制
- **缓存目录**: `~/.frontend-cli-cache/` 存储下载的模板
- **缓存清理**: 使用 `frontend-cli clean` 清理所有缓存
- **缓存状态**: 使用 `frontend-cli cache` 查看缓存状态

## 🤝 贡献

欢迎贡献！以下是参与方式：

### 报告问题
- 在 Gitee 仓库提交 Issue
- 描述清晰的问题复现步骤

### 提交代码
1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 创建 Pull Request

### 开发指南
```bash
# 克隆项目
git clone https://gitee.com/qingfeng_feiyang/front-end-template.git

# 安装依赖
cd front_end_cli
npm install

# 链接本地包
npm link

# 运行测试
node test-cli.js
```

## 📄 许可证

MIT License