如何结构化搭建带subviews的VueJs Views目录

以下是经过大量大型项目验证的通用最优实践，可直接适配你的现有结构做调整：

核心设计原则 #

• 目录结构和路由配置一一对应，打开目录就能直观对应到路由路径
• 按业务模块划分，避免跨模块的内容混放
• 控制目录层级深度，降低文件查找成本

你现有结构的优化点 #

你当前的结构已经符合基础的模块划分逻辑，只需要做两个小调整即可：

• 无需单独设置subviews目录，子路由对应的视图直接放在父模块目录下即可
• 文件名可去掉重复的模块前缀，减少冗余

推荐目录结构 #

views/
├── user/
│   ├── index.vue         # 对应路由 /user，替代原有的UserIndex.vue
│   ├── show.vue          # 对应路由 /user/:id，替代原有的UserShow.vue
│   ├── roles/
│   │   └── index.vue     # 对应路由 /user/roles，替代原有的subviews/UserRoles.vue
│   └── components/       # 可选，存放user模块下非路由的局部复用组件
│       └── user-info-card.vue
└── role/
    └── index.vue         # 对应路由 /role，替代原有的RoleIndex.vue

配套命名规则 #

1. 目录名统一用小写 kebab-case 格式，避免大小写敏感导致的不同系统部署问题
2. 路由视图文件如果是当前目录的入口，统一命名为index.vue，不需要加模块名或Index后缀
3. 非路由的局部组件统一放在对应模块的components目录下，和路由视图明确区分
4. 三级及以上的深层路由，如果对应的业务独立性较强，可以直接抽成views下的一级目录，避免目录嵌套超过3层，比如路由/user/roles/permissions可以对应views/user-role-permissions/index.vue

内容的提问来源于stack exchange，提问作者SNO