diff --git a/.claude/skills/vue-project-structure/SKILL.md b/.claude/skills/vue-project-structure/SKILL.md index adbfc85..fec9a89 100644 --- a/.claude/skills/vue-project-structure/SKILL.md +++ b/.claude/skills/vue-project-structure/SKILL.md @@ -1,382 +1,335 @@ --- name: vue-project-structure -description: cz-web 项目(Vue 3 + TypeScript + Vite 网页端站点)的目录结构与编码规范强制 skill。当在本项目中新增、创建、移动、重构或修改任何 src/ 下的代码文件(.vue/.ts/.less)、路由、store、API、组件、页面时,必须加载本 skill,先读取项目目录、再按本规范确定文件归属与写法。本项目是**网页端站点(非中后台)**:页面按名称组织(home/news/product…),接口层在 api/、数据层在 Pinia、页面只经 store 取数,样式使用**less**。凡是涉及"新文件放哪"、"页面数据怎么拿"、"页面/公共组件归属"、"命名"、"功能对应哪些文件"的任务也必须使用本 skill。 -version: 2.0.0 +description: Vue 3 与 uni-app(Vue3) 项目的目录结构与编码规范通用 skill。当在任意 Vue 3 或 uni-app(Vue3) 项目中新增、创建、移动、重构、修改 src/ 下的代码文件(.vue/.ts/.less/.scss)、路由、Pinia store、API、组件、页面、分包时,必须先加载本 skill。核心内容:先探测项目形态(Vue3 网页端/中后台 或 uni-app 小程序),再套用对应目录骨架;页面统一为「index.vue + cpns/」两件套(不使用 index.ts barrel);数据流固定为 页面 → store → api 单向;含 pages.json 注册与分包规范。凡是涉及"新文件放哪""页面数据怎么拿""公共组件 vs 页面私有组件归属""命名""分包""功能对应哪些文件"的任务也必须使用本 skill。本 skill 与具体仓库无关,可在任何 Vue 3 / uni-app 项目中直接复用。 +version: 4.0.0 --- -# cz-web 项目目录结构规范(强制 · 网页端) +# Vue 3项目目录结构规范(通用 · 先探测后套用) -> 完整版调试文档见 `docs/vue-project-guide.md`(其中中后台相关部分已废弃),**本 skill 为唯一现行规范,以其为准**;未覆盖场景参照 Vue 3 官方目录约定。 +> 适用范围:**Vue 3**(含 uni-app 的 Vue 3 版本)。不涉及 Vue 2。 +> 本 skill 与具体仓库无关:执行顺序永远是 **① 探测现状 → ② 选定骨架变体 → ③ 按规范落位**。项目内已有显式文档(`AGENTS.md`/`CLAUDE.md`、`docs/` 下的结构说明)优先级高于本 skill。 -## 第一步:读取项目目录(每次加载必做) +--- -动手写任何代码前,先用工具映射当前项目结构,确认正在操作的正确层级: +## 第零步:探测项目形态(每次加载必做) -1. 用 `codegraph_files` 或 `glob` 列出 `src/` 下的现行目录结构(如某目录尚不存在,应在对应职责目录创建,而不是自创新顶层目录)。 -2. 读取目标文件及其同级文件,确认现有命名风格与组织方式(页面名、store 名、api 名必须一致)。 -3. 只有在目录树确认完毕后,才允许创建/修改文件。 +### 0.1 读取证据 -## 核心原则 +| 要看什么 | 怎么看 | +| ---------- | --------------------------------------------------------------------------- | +| 依赖清单 | `package.json`:是否有 `@dcloudio/*`、`pinia`、`vue-router` | +| 是否小程序 | 存在 `pages.json`、`manifest.json`;`App.vue` 含 `onLaunch` | +| 构建工具 | `vite.config.*`(Vue 3 必配);`vue.config.*` 为 Vue CLI | +| 目录现状 | 列出 `src/`(uni-app 通常无 src 包裹,直接根目录)的实际结构 | +| 样式方案 | 现有 `.less` → less;`.scss` → scss | +| 语言 | 有 `tsconfig.json` → TypeScript | +| 目标平台 | `manifest.json` 的 `mp-weixin`/`h5`/`app` 等;`pages.json` 的 `subPackages` | -1. **三层数据流(页面 → store → api)**:页面组件只通过 **Pinia store** 获取数据;store 是数据层,负责调用 **api 层**接口取数并维护状态;api 层只发请求。**页面禁止直接 import api**。 -2. **按页面/页面名组织(一页一套)**:`views//`、`api/.ts`、`stores/modules/.ts`、`types/business/.d.ts` 四者同名对应,方便分层查看。 -3. **组件两级归属**:`components/` 只放**跨页面复用的公共组件**;`views//cpns/` 放**该页面独有的组件**。 -4. **网页端(非中后台)**:无侧边栏菜单/权限路由/TabsBar 体系;页面以业务(首页、新闻、产品、关于我们…)划分。 -5. **样式使用 less**:全局样式为 `.less` 文件,组件内 `