Frontend Toolkit 🚀

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

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

✨ 核心特性

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

🛠️ 主要功能

🚀 快速开始

前置要求

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

安装

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

# 构建项目
cargo build --release

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

基本使用

# 安装脚手架到本地在项目文件目录中执行 
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

📖 详细文档

• 命令参考 - 所有命令的详细说明和示例
• Vue3 脚手架指南 - Vue3 项目创建完整指南
• 开发指南 - 如何参与项目开发
• 架构设计 - 项目架构和设计原理
• 常见问题 - 常见问题解答

🎯 使用场景

前端项目初始化

# 创建带路由的 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

组件开发

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

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

构建优化

# 压缩 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

开发环境设置

# 安装 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 规范的提交信息自动分类。

使用方法

1. 安装 git-cliff

# 全局安装
cargo install git-cliff

# 或使用 Makefile
make install-git-cliff

2. 生成 Changelog

# 生成完整的 changelog
git-cliff --output CHANGELOG.md

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

# 或使用 Makefile
make changelog

3. 预览未发布的变更

# 预览未发布的变更
git-cliff --unreleased

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

# 或使用 Makefile
make changelog-preview

4. 发布新版本

# 使用 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 许可证 开源。

🙏 致谢

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

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