核心用法
fe-cli 是统一的前端项目初始化入口,通过智能识别用户意图路由至 9 类专业子技能:
| 项目类型 | 适用场景 | 子技能 |
|---------|---------|--------|
| web | 官网/Web SPA | fe-cli-web |
| admin | 后台管理/Dashboard/CRUD | fe-cli-admin |
| h5 | 移动H5/微信H5 | fe-cli-h5 |
| electron | 桌面客户端 | fe-cli-electron |
| tauri | 轻量Rust桌面 | fe-cli-tauri |
| ssr | Next.js/Nuxt服务端渲染 | fe-cli-ssr |
| miniapp | 微信小程序/Taro | fe-cli-miniapp |
| rn | React Native移动端 | fe-cli-rn |
| astro | 静态建站/博客/文档 | fe-cli-astro |
快速模式:一句话指定完整技术栈("React + Tailwind + Zustand 后台项目叫 my-admin")直接生成;交互模式:逐步询问类型、框架、UI库、状态管理、i18n 等配置。
技术栈支持
- 框架:React/Vue/Next.js/Nuxt.js/Astro/React Native
- UI库:shadcn/ui、Ant Design、MUI、Tailwind CSS
- 状态管理:Zustand、Redux Toolkit、Pinia
- 国际化:i18n 完整支持
- CSS预处理器:默认 Sass (SCSS)
共享公共层
所有项目自动生成标准化基础设施:
src/components/- AppProvider、AuthGuard、ErrorBoundary、Loading/Empty/Error 状态组件src/hooks/- useRequest、useDebounce、useLocalStorage、useMediaQuery 等 8+ 通用 Hookssrc/services/- fetch 请求封装、结构化日志系统(含导出功能)src/theme/- 亮/暗主题系统src/config/- 环境配置、集中式路由- 多环境
.env文件(development/test/production) .ai/PROJECT.md- AI可读的项目文档
代码规范
- 包管理器:优先 bun,备选 pnpm
- 路径别名:
@/→src/ - Node 版本:18+
- 部署推荐:Vercel 零配置
显著优点
1. 开箱即用的标准化:9 种项目类型均遵循统一架构约定,团队多项目切换零成本
2. 智能路由与降级:自动识别项目类型,执行失败时提供清晰的网络/环境诊断指引
3. 现代技术栈优先:首推 shadcn/ui + Lucide/Vue Bits,兼顾美观与体积
4. AI 友好设计:生成 .ai/PROJECT.md,便于后续 AI 代理理解项目结构
5. 双模式灵活:既支持专家用户一句话生成,也支持新手交互式引导
潜在缺点与局限性
1. 前端专属边界:明确不支持 Python/Go/Java 等后端项目初始化
2. 部署能力有限:仅负责本地脚手架,不处理服务器部署流程
3. 模板版本依赖:引用的包版本若不存在需用户手动指定,不阻塞流程但需人工干预
4. 子技能依赖:实际生成逻辑分散在子技能中,单一类型问题需定位到具体子技能
5. 网络敏感:bun/pnpm 创建失败时需用户检查网络代理或切换 registry
适合人群
- 前端团队 Leader:建立团队标准化项目模板,统一技术选型与目录规范
- 全栈开发者:快速启动各类前端子项目,无需重复配置基础设施
- 技术培训师:标准化教学项目结构,学生项目具有一致可维护性
- 独立开发者:一人多项目场景下保持代码组织一致性
常规风险
| 风险场景 | 应对策略 |
|---------|---------|
| 目录已存在 | 交互询问:覆盖/合并/取消 |
| 依赖安装失败 | 提示检查网络代理、提供淘宝镜像命令 |
| 矛盾技术栈(React+Vue) | 主动识别并请求用户确认 |
| 越界请求(部署服务器) | 明确拒绝并说明能力边界 |
| 非前端请求(Python后端) | 拒绝并重定向至适当工具 |
已有项目审查
支持对存量项目执行规范性检查,输出 ✅ 符合项 / ❌ 缺失项 / ⚠️ 建议项 报告,检查点涵盖包管理器、路径别名、环境文件、日志系统、主题/i18n/store 目录等 20+ 项标准。