vue.js项目目录结构应按功能职责、业务域、静态资源、状态管理与工程化配置五方面分层设计：src/api/集中接口封装，src/utils/存放纯函数工具，src/composables/组织组合式函数，src/modules/下按业务域（如user、dashboard）划分views/components/services/store，public/与src/assets/严格区分静态资源处理方式，pinia store与api解耦并通过services协调，vite.config.ts与tsconfig.json统一配置路径别名并启用eslint校验。
一、按功能职责划分核心目录
Vue.js 项目目录结构应以功能职责为第一划分依据，避免将不同性质的文件混杂在单一目录中。这种结构能显著降低新成员的理解成本，并支持模块间清晰的依赖边界。
1、在 src/ 目录下创建 api/ 子目录，用于集中存放所有接口请求封装文件，每个业务域（如 user、order、product）对应独立的 JS 或 TS 文件。
2、新建 utils/ 目录，仅存放纯函数工具，例如日期格式化、深克隆、URL 参数解析等，禁止在此目录中引入 Vue 实例或组件逻辑。
3、建立 composables/ 目录（Vue 3 推荐），用于存放组合式函数，每个文件导出一个具名函数，如 useScrollPosition 或 useFormValidation。
4、将全局样式资源统一归入 assets/styles/，其中包含 base.css（重置与基础变量）、theme.css（主题色定义）、mixins.scss（Sass 混入）。
二、按业务域组织页面与组件
业务逻辑强相关的代码应聚合在独立的业务域目录内，实现高内聚、低耦合，便于横向扩展和团队并行开发。
1、在 src/modules/ 下为每个主业务创建子目录，例如 user/、dashboard/、settings/。
2、每个业务域目录内包含 views/（页面级组件）、components/（该业务专用组件）、services/（领域服务逻辑）、store/（Pinia store 模块文件）。
3、业务组件命名须带前缀，如 UserProfileCard.vue、DashboardQuickStats.vue，禁止使用通用名如 Card.vue 或 Stats.vue。
4、路由配置文件 routes.ts 放置于对应业务域根目录下，通过动态 import 实现路由级代码分割。
三、静态资源与构建资产分层管理
静态资源需区分是否参与构建流程，避免误打包或路径失效问题；同时应按类型与用途严格分层，确保可维护性与部署一致性。
1、public/ 目录仅存放不经过 Vite/Webpack 处理的资源，如 favicon.ico、robots.txt、manifest.json，其路径在运行时与根路径完全一致。
2、src/assets/ 下设 images/、icons/、fonts/ 三级子目录，所有图片引用必须使用相对路径或别名（如 @/assets/images/logo.svg）。
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
3、图标资源优先采用 SVG 单文件组件形式封装，存于 src/components/icons/，每个 SVG 图标导出为独立组件，如 IconUser.vue。
4、字体文件统一放入 src/assets/fonts/，并在 assets/styles/base.css 中通过 @font-face 声明，禁止在组件内重复声明。
四、状态管理与接口请求解耦设计
PINIA 状态管理与 API 请求层必须保持单向数据流，状态变更仅由显式 action 触发，API 层不得直接修改 store，二者通过 service 层协调。
1、每个业务域的 Pinia store 文件（如 userStore.ts）存放于对应模块的 store/ 子目录中，store 内部不引用任何组件或路由实例。
2、api/ 目录下的请求文件（如 userApi.ts）只负责返回 Axios Promise，不处理响应数据映射或错误弹窗逻辑。
3、新增 services/ 目录作为协调层，每个 service 文件（如 userService.ts）调用对应 api 并将结果适配为 store 所需格式，同时触发相关 action。
4、所有 API 请求必须携带明确的请求标识符（如 requestId），用于调试追踪与请求取消控制，该标识由 service 层统一注入。
五、工程化配置与路径别名标准化
路径别名是提升导入可读性与重构安全性的关键手段，必须覆盖全部高频引用路径，并在 TypeScript 类型系统中同步声明。
1、在 vite.config.ts 的 resolve.alias 中定义以下标准别名：@/ → src/、@api/ → src/api/、@utils/ → src/utils/、@stores/ → src/stores/。
2、在 tsconfig.json 的 compilerOptions.paths 中配置完全相同的别名映射，确保 TS 类型检查与 IDE 跳转正常工作。
3、禁用绝对路径硬编码，所有跨目录导入必须使用别名，例如禁止写 ../../../utils/date，必须写 @utils/date。
4、在 ESLint 配置中启用 import/first 与 import/no-absolute-path 规则，对违规导入进行实时报错拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
