# Frontend-Toolkit

**Repository Path**: kang841331654/Frontend-Toolkit

## Basic Information

- **Project Name**: Frontend-Toolkit
- **Description**: rust 开发前端脚手架
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2025-09-18
- **Last Updated**: 2025-09-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Frontend Toolkit 🚀

**面向前端开发者的全功能命令行工具包**

Frontend Toolkit 是一个基于 Rust 开发的高性能 CLI 工具，旨在提升前端开发效率，集成常用开发任务的自动化能力。

[![Rust](https://img.shields.io/badge/rust-1.65%2B-orange.svg)](https://www.rust-lang.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Version](https://img.shields.io/badge/version-0.1.7-blue.svg)](./Cargo.toml)

## ✨ 核心特性

- 🚀 **高性能**：基于 Rust 编写，运行速度快，内存安全
- 🛠️ **多功能**：支持组件生成、项目脚手架、文件压缩等多种功能
- 🎯 **易用性**：直观的命令行交互界面，上手简单
- 🔧 **可扩展**：模块化设计，便于新增命令和功能
- 📦 **开箱即用**：无需复杂配置，安装即可使用

## 🛠️ 主要功能

| 功能 | 命令 | 描述 |
|------|------|------|
| **Vue3 项目脚手架** | `create-vue3` | 创建 Vue3 全家桶项目 (Vue + Router + Pinia + TypeScript) |
| **React 项目脚手架** | `create-react` | 创建 React 全家桶项目 (React + Router + Zustand + TypeScript) |
| **组件生成器** | `component` | 快速生成 React/Vue 组件模板 |
| **文件压缩** | `minify` | 压缩 CSS/JS 文件，减小文件体积 |
| **JSON 转 TypeScript** | `json2ts` | 将 JSON 数据转换为 TypeScript 接口定义 |
| **依赖分析** | `deps` | 分析 package.json 依赖结构 |
| **静态文件服务** | `serve` | 启动本地静态文件服务器 |

## 🚀 快速开始

### 前置要求

- Rust 1.65+ 
- 支持的操作系统：macOS, Linux, Windows

### 安装

```bash
# 克隆项目
git clone <repository-url>
cd rust-cli

# 构建项目
cargo build --release

# 运行工具
./target/release/frontend-toolkit --help
```

### 基本使用

```bash
# 安装脚手架到本地在项目文件目录中执行 
cargo install --path .

#卸载脚手架在项目文件目录中执行
cargo uninstall frontend-toolkit

# 查看版本脚手架版本
frontend-toolkit --version

# 查看所有可用命令
frontend-toolkit --help

# 创建 Vue3 全家桶项目
frontend-toolkit create-vue3 my-app --template full --typescript

# 创建 React 全家桶项目
frontend-toolkit create-react my-react-app --template full --typescript

# 生成 React 组件
frontend-toolkit component Button --framework react

# 压缩 CSS 文件
frontend-toolkit minify -i style.css -o style.min.css -t css

# JSON 转 TypeScript 接口
frontend-toolkit json2ts -i data.json -n UserData -o types.ts
```

## 📖 详细文档

- [命令参考](./docs/COMMANDS.md) - 所有命令的详细说明和示例
- [Vue3 脚手架指南](./docs/VUE3_SCAFFOLD.md) - Vue3 项目创建完整指南
- [开发指南](./docs/DEVELOPMENT.md) - 如何参与项目开发
- [架构设计](./docs/ARCHITECTURE.md) - 项目架构和设计原理
- [常见问题](./docs/FAQ.md) - 常见问题解答

## 🎯 使用场景

### 前端项目初始化
```bash
# 创建带路由的 Vue3 项目
frontend-toolkit create-vue3 my-vue-app --template router --typescript

# 创建基础 Vue3 项目
frontend-toolkit create-vue3 simple-app --template basic

# 创建 React 全家桶项目
frontend-toolkit create-react my-react-app --template full --typescript

# 创建基础 React 项目
frontend-toolkit create-react simple-react --template basic
```

### 组件开发
```bash
# 生成 React 组件（带样式和测试）
frontend-toolkit component Header --framework react

# 生成 Vue 组件
frontend-toolkit component Sidebar --framework vue
```

### 构建优化
```bash
# 压缩 CSS 文件
frontend-toolkit minify -i src/styles/main.css -o dist/main.min.css -t css

# 压缩 JavaScript 文件
frontend-toolkit minify -i src/js/app.js -o dist/app.min.js -t js
```

## 🏗️ 技术架构

Frontend Toolkit 采用模块化设计，核心架构包括：

- **命令路由层** (`main.rs`)：使用 clap 进行命令行参数解析和路由
- **业务逻辑层** (`commands/`)：各功能模块的具体实现
- **工具服务层** (`utils/`)：模板引擎、文件操作等通用工具
- **模板系统**：支持多框架的代码模板生成

### 技术栈

- **核心语言**：Rust 2021 Edition
- **CLI 框架**：clap 4.5（命令行解析）
- **异步运行时**：tokio 1.0（异步处理）
- **错误处理**：anyhow 1.0（统一错误处理）
- **序列化**：serde + serde_json（JSON 处理）
- **其他工具**：colored（彩色输出）、walkdir（目录遍历）

## 🤝 贡献指南

我们欢迎所有形式的贡献！

### 如何贡献

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

### 开发环境设置

```bash
# 安装 Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 克隆项目
git clone https://gitee.com/kang841331654/Frontend-Toolkit
cd frontend-toolkit

# 安装开发工具
rustup component add clippy rustfmt

# 运行测试
cargo test

# 检查代码风格
cargo clippy
cargo fmt --check
```

## 📝 版本历史与 Changelog

本项目使用 `git-cliff` 自动生成 changelog，支持基于 [Conventional Commits](https://www.conventionalcommits.org/) 规范的提交信息自动分类。

### 使用方法

#### 1. 安装 git-cliff
```bash
# 全局安装
cargo install git-cliff

# 或使用 Makefile
make install-git-cliff
```

#### 2. 生成 Changelog
```bash
# 生成完整的 changelog
git-cliff --output CHANGELOG.md

# 或使用内置命令
cargo run -- changelog

# 或使用 Makefile
make changelog
```

#### 3. 预览未发布的变更
```bash
# 预览未发布的变更
git-cliff --unreleased

# 或使用内置命令
cargo run -- changelog --preview

# 或使用 Makefile
make changelog-preview
```

#### 4. 发布新版本
```bash
# 使用 Makefile 一键发布（推荐）
make release

# 手动发布
git-cliff --tag v0.1.2 --output CHANGELOG.md
git add CHANGELOG.md
git commit -m "chore(release): prepare for v0.1.2"
git tag v0.1.2
```

### 提交信息规范

为了让 changelog 自动分类，请使用以下提交信息格式：

- `feat: 添加新功能` → ✨ 新功能
- `fix: 修复问题` → 🐛 问题修复  
- `docs: 更新文档` → 📚 文档
- `perf: 性能优化` → ⚡ 性能优化
- `refactor: 重构代码` → ♻️ 重构
- `test: 添加测试` → 🧪 测试
- `chore: 其他改动` → ⚙️ 其他

### v0.1.5 (Current)
- ✅ 实现 Vue3 项目脚手架功能
- ✅ 实现 React 项目脚手架功能
- ✅ 支持组件生成（React/Vue）
- ✅ 文件压缩功能
- ✅ JSON 到 TypeScript 转换
- ✅ 依赖分析功能
- ✅ 静态文件服务器

### 规划中的功能
- 🔄 更多模板支持
- 🔄 代码格式化工具
- 🔄 打包和发布工具

## 📄 许可证

本项目基于 [MIT 许可证](LICENSE) 开源。

## 🙏 致谢

感谢所有为本项目做出贡献的开发者！

---

**Frontend Toolkit** - 让前端开发更高效 🚀