FangHub CLI

🛠️ 现代化的 Web 项目工程脚手架，支持快速创建 Vue 项目和 Admin 后台管理系统。

特性

• 📦 支持创建 Vue 项目和 Admin 后台管理系统
• 🎯 支持 JavaScript 和 TypeScript 两种语言
• 🚀 丰富的项目特性配置选项
• 🎨 多种 UI 框架选择（Ant Design Vue、Element Plus）
• 🔧 内置常用开发工具和配置
• 💡 交互式命令行界面，操作简单直观

快速开始

安装

使用 npm、yarn 或 pnpm 全局安装：

# 使用 pnpm
pnpm create fh

# 使用 npm
npm create fh@latest

# 使用 yarn
yarn create fh

创建项目

1. 运行命令后，选择项目类型：

   • Vue 项目
   • Admin 后台管理系统

2. 配置项目参数：

   • 项目名称
   • 语言类型（JavaScript/TypeScript）
   • 包名
   • 是否纯净版项目

3. 选择项目特性：

   • 路由（Router）
   • 状态管理（Pinia）
   • HTTP 客户端（Axios）
   • CSS 预处理器（SCSS/Less）
   • UI 框架（Ant Design Vue/Element Plus）
   • 代码规范（ESLint/Prettier/Stylelint）
   • 测试框架（Vitest/Playwright/Cypress）
   • Mock 数据
   • JSX 支持
   • Mars3D 地图库

4. 等待项目创建完成

5. 进入项目目录并安装依赖：

cd 项目名称
pnpm install
pnpm run dev

项目结构

Vue 项目结构

├── public/              # 静态资源
├── src/
│   ├── assets/          # 资产文件
│   ├── components/      # 组件
│   ├── router/          # 路由配置（可选）
│   ├── stores/          # Pinia 状态管理（可选）
│   ├── styles/          # 样式文件
│   ├── views/           # 页面视图（可选）
│   ├── App.vue          # 根组件
│   └── main.js/ts       # 入口文件
├── .gitignore           # Git 忽略配置
├── index.html           # HTML 模板
├── package.json         # 项目配置
└── vite.config.js/ts    # Vite 配置

Admin 后台管理系统结构

├── public/              # 静态资源
├── src/
│   ├── assets/          # 资产文件
│   ├── components/      # 组件
│   ├── router/          # 路由配置
│   ├── stores/          # Pinia 状态管理
│   ├── styles/          # 样式文件
│   ├── utils/           # 工具函数
│   ├── views/           # 页面视图
│   ├── App.vue          # 根组件
│   └── main.js/ts       # 入口文件
├── .gitignore           # Git 忽略配置
├── index.html           # HTML 模板
├── package.json         # 项目配置
└── vite.config.js/ts    # Vite 配置

支持的特性

核心特性

• 路由：Vue Router，支持页面导航和路由配置
• 状态管理：Pinia，轻量级状态管理解决方案
• HTTP 客户端：Axios，支持基础配置和增强版（带加载状态、权限处理等）
• CSS 预处理器：SCSS、Less，增强 CSS 功能

UI 框架

• Ant Design Vue：企业级 UI 组件库
• Element Plus：优雅的 Vue 3 组件库

开发工具

• ESLint：代码质量检查
• Prettier：代码格式化
• Stylelint：样式代码检查
• Oxlint：快速的 ESLint 替代品
• Commitlint：提交信息规范检查

测试框架

• Vitest：快速的单元测试框架
• Playwright：端到端测试框架
• Cypress：现代化的前端测试工具

其他特性

• Mock 数据：本地模拟数据，便于开发和测试
• JSX 支持：支持 JSX 语法
• Mars3D：3D 地图库，用于地理信息系统

命令行选项

# 创建新项目
create-fh

# 查看版本
create-fh --version

# 查看帮助
create-fh --help

技术栈

• Node.js：运行环境
• TypeScript：开发语言
• Vite：构建工具
• Vue 3：前端框架
• Clack：交互式命令行界面
• Handlebars：模板渲染

贡献指南

1. Fork 本仓库
2. 创建特性分支
3. 提交更改
4. 推送到分支
5. 开启 Pull Request

许可证

ISC

联系我们

• 作者：DingNanLin
• 邮箱：[email protected]
• GitHub：https://github.com/fanghub/fanghub-cli

FangHub CLI - 让项目初始化更简单、更高效！