这个结构也是我们项目目前正在使用的,应对两三百个页面的web项目是没有任何问题的,在扩展性,多人合作方面是非常优秀的。废话不多说,先上结构,再说为什么要这么做。
├── service # 后端接口管理
│ ├── index.js # 接口管理出入口
│ └── … # 具体的不同业务/服务接口文件【S-1】
├── assets # 项目依赖资源管理
│ └── imgs # 图片资源
│ ├── style # 样式资源
│ └── js # 依赖的第三方sdk之类的js资源
├── components # 项目组件目录
│ ├── public # 公共组件/基础组件(比如基础的按钮/输入框等)
│ │ ├── index.js # 基础组件的注册文件【可选】
│ │ ├── README.md # 组件使用说明文档【可选】
│ │ └── … # 组件
│ └── … # 基础性的业务组件(有详细说明)【C-1】
├── pages
│ ├── modules # 具体业务所归属的文件夹(可以用业务名称作为文件夹名字)
│ │ ├── components # 业务所用到的组件
│ │ ├── views # 业务的所有页面
│ │ ├── utils # 业务的工具集
│ │ ├── static # 业务所用到的静态资源
│ │ ├── service # 业务的后端接口管理
│ │ ├── store # 业务所用到的状态库(本结构基于Vue,这里是业务的Vuex)
│ │ └── index.js # 业务的唯一出口(包含路由与状态库)
│ └── … # 其他业务【P-1】
├── config # 项目的基础配置
│