大型前端项目结构设计

  • Post author:
  • Post category:其他


这个结构也是我们项目目前正在使用的,应对两三百个页面的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 # 项目的基础配置



版权声明:本文为Arui_0原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。