--- 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 --- # cz-web 项目目录结构规范(强制 · 网页端) > 完整版调试文档见 `docs/vue-project-guide.md`(其中中后台相关部分已废弃),**本 skill 为唯一现行规范,以其为准**;未覆盖场景参照 Vue 3 官方目录约定。 ## 第一步:读取项目目录(每次加载必做) 动手写任何代码前,先用工具映射当前项目结构,确认正在操作的正确层级: 1. 用 `codegraph_files` 或 `glob` 列出 `src/` 下的现行目录结构(如某目录尚不存在,应在对应职责目录创建,而不是自创新顶层目录)。 2. 读取目标文件及其同级文件,确认现有命名风格与组织方式(页面名、store 名、api 名必须一致)。 3. 只有在目录树确认完毕后,才允许创建/修改文件。 ## 核心原则 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` 文件,组件内 `