极致代码结构优化是按业务域+能力层双维度组织src目录，分modules/、shared/、core/三层，组件语义化命名与归属，api和状态管理物理隔离，静态资源按用途收敛。
极致代码结构优化不是堆砌规范，而是让目录和文件组织方式自然匹配业务演进节奏、团队协作习惯和维护成本曲线。核心在于分层清晰、职责明确、收敛复用——结构本身不产生价值，但错误的结构会持续拖慢迭代速度。
按业务域+能力层双维度组织 src 目录
避免“components/views/utils”这种纯技术分类，改用语义化分层：
-
modules/：每个子目录对应一个完整业务模块（如
user/、order/），内部包含该模块专属的views/、components/、api/、stores/，形成高内聚闭环 -
shared/：跨模块复用的资源，再细分为
components/（通用按钮、弹窗）、composables/（useFetch、useTable）、types/（全局 TS 接口）、directives/（权限指令、懒加载） -
core/：框架级封装，如
router/（路由守卫、动态加载逻辑）、store/（Pinia 实例、插件注册）、utils/（日期格式化、深克隆等无副作用函数）
组件命名与存放严格遵循功能归属
不以“是否通用”为标准，而以“谁负责维护、在哪个场景下使用”为准：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用户管理页里的搜索框，放在
modules/user/components/UserSearch.vue，而非shared/components/—— 即使暂时没复用，也预留了业务语义锚点 - 所有组件名采用 PascalCase，且带明确前缀：
UserProfileCard.vue、OrderStatusBadge.vue，杜绝Card.vue或index.vue这类模糊命名 - 复杂页面拆出
sections/子目录，如modules/order/views/OrderDetail.vue下的sections/OrderItemsSection.vue，降低单文件行数和理解负担
API 和状态管理按模块边界物理隔离
防止耦合蔓延的关键是让依赖关系可感知、可追溯：
- 每个
modules/*/api/下只放本模块调用的接口函数，统一导出为api.ts；core/api/request.ts仅封装 axios 实例和拦截器，不定义任何业务路径 - Pinia store 按模块划分独立文件，如
modules/user/stores/userStore.ts，通过defineStore显式声明 ID；全局共享状态（如用户登录态）收口到shared/stores/authStore.ts，禁止跨模块直接 import 其他模块的 store - 引入路径别名强化约束：
@/modules/user/、@/shared/composables/，在vite.config.ts中配置，避免相对路径跳转混乱
静态资源与样式按用途收敛，不按类型平铺
图片、图标、字体不是“资产”，而是“设计语言载体”：
-
assets/icons/下按功能分组：user/、order/、common/，SVG 图标优先用<svg></svg>内联或 Sprite，减少 HTTP 请求 -
assets/styles/不放具体样式文件，只放variables.scss（主题变量）、mixins.scss（布局混入）、reset.scss（基础重置）；组件样式全部写在.vue的<style scoped></style>中 - 第三方 UI 库（如 Element Plus）的主题覆盖统一在
shared/styles/element-override.scss中管理，不散落在各组件里
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
