Fe Cli — Fe CLI

fe-cli — 前端项目脚手架 共享入口点，适用于所有前端项目类型。路由到类型特定的子技能，并生成共享的公共层（fetch 工具、全局样式、多环境配置等）。

快速开始 一行命令（跳过所有问题） 用户： "初始化一个 React + Tailwind + Zustand 后台项目，叫 my-admin" → 检测类型 = admin → 委托给 fe-cli-admin，在快速模式下运行

交互模式 用户： "新建前端项目" → 询问： "什么类型？" → 路由到子技能 → 子技能询问详细问题

项目类型检测 从用户的请求中识别类型。关键词映射： 关键词 | 类型 | 子技能 -----|-----|----- 后台/管理/Admin/Dashboard/CRUD | admin | fe-cli-admin 移动/H5/手机/微信H5/Mobile | h5 | fe-cli-h5 桌面/Electron/客户端/Desktop | electron | fe-cli-electron SSR/Next.js/Nuxt/服务端渲染/SEO | ssr | fe-cli-ssr 小程序/微信小程序/MiniApp/WeChat | miniapp | fe-cli-miniapp （默认 / 官网/Web/SPA/网页） | web | fe-cli-web

如果不明确，询问： "这是什么类型的项目？Web SPA / 后台管理 / 移动H5 / Electron桌面 / SSR / 小程序"

路由到子技能 一旦类型被识别，读取相应子技能的 SKILL.md： 读取： ./<类型>/SKILL.md （相对于 fe-cli/） 每个子技能处理： 类型特定的问题（框架、UI 库、状态管理、i18n、预提交） 类型特定的文件生成（布局、页面、路由） 安装和后置设置

共享公共层 在子技能生成类型特定的文件后，生成这些共享文件到项目中。 读取 references/shared-base.md 和 references/shared-config.md 以获取代码模板。

目录结构 生成项目 项目名称/ ├── src/ │ ├── services/ │ │ ├── request.ts # fetch 包装器带拦截器 │ │ ├── logger.ts # 结构化日志器（级别、轮换、持久存储） │ │ ├── log-export.ts # 日志导出（下载 .log/.json）+ 提交（端点待定） │ │ └── api/ │ │ └── index.ts # API 端点定义 │ ├── styles/ │ │ ├── global.scss # CSS 变量 + 全局样式 │ │ ├── reset.scss # CSS 重置 │ │ └── variables.scss # 设计令牌（颜色、间距、断点） │ ├── utils/ │ │ ├── index.ts # 通用工具（去抖、克隆等） │ │ ├── storage.ts # localStorage/sessionStorage 包装器 │ │ ├── format.ts # 日期/数字格式化 │ │ └── validate.ts # 表单验证帮助器 │ └── types/ │ └── global.d.ts # 全局类型声明 ├── .env # 公共环境 ├── .env.development # 开发环境（API_BASE_URL=http://localhost:3000） ├── .env.test # 测试环境 ├── .env.production # 生产环境 └── package.json # 脚本部分

package.json 脚本 { "scripts": { "dev": "vite --mode development", "dev:test": "vite --mode test", "build:test": "vite build --mode test", "build:prod": "vite build --mode production", "preview": "vite preview", "lint": "eslint src --ext .ts,.tsx", "lint:fix": "eslint src --ext .ts,.tsx --fix", "typecheck": "tsc --noEmit" } }

共享代码模板 请参阅 references/shared-base.md 以获取所有共享源代码模板（包括 logger.ts 和 log-export.ts）。 请参阅 references/shared-config.md 以获取 vite/tsconfig/eslint 配置模板。

AI 可读项目文档 在生成所有项目文件（共享层 + 类型特定）后，在项目根目录生成 .ai/PROJECT.md。 此文件是为了让 AI 代理快速理解项目。

.ai/PROJECT.md 目标 完整的目录树，列出每个文件及其一行目的 技术栈摘要（框架、UI 库、状态管理、CSS 等） 架构约定（路径别名、导入顺序、命名规则） 命令（dev、build、test、lint、typecheck） 关键模式（如何工作路由、如何进行 API 调用、如何管理状态） 模板 请参阅 references/ai-project-md.md 以获取完整模板。 根据实际生成的文件适配目录树。

规则 始终使用 tree 命令格式（├── 和 └──）表示目录； 每个文件条目必须有一个注释解释其目的 按目录分组；保持与实际文件系统相同的顺序 更新 .ai/PROJECT.md 时，项目结构发生变化 保持简洁 — 每个文件一行，而不是段落

关键规则 包管理器：始终使用 pnpm CSS 预处理器：默认使用 Sass（SCSS 语法） 路径别名：在 tsconfig 和 vite 配置中配置 @/ → src/ 响应式断点：移动 < 768px < 平板 < 1024px < 桌面 网络库：使用原生 fetch 包装器（无 axios），请参阅 references/shared-base.md 环境文件：始终生成 .env、.env.development、.env.test、.env.production 日志记录：始终生成 services/logger.ts + services/log-export.ts。 日志器使用 Logger.child("Module") 模式。 最大存储 5MB，自动修剪。 仅在开发模式下输出到控制台。 提交端点为占位符（待定）。 节点版本：目标 Node 18+ pnpm 构建脚本：在 package.json 中使用 pnpm.onlyBuiltDependencies 自动批准 n