前端项目结构的划分

-| common // 常用工具以及公共函数 -| const.js -| common.js -| util.js -| config.js -| (hoc|mixin|hooks) // 框架相关的功能文件 -| store -| index.js // 生成实例并进行一些必要配置后导出 -| entrys.js // 整合所有所有module并导出 -| modules -| global.js -| util.js // 存放状态相关的工具函数 -| readme.md // 说明 -| 其他... -| router -| index.js // 生成实例并进行一些必要配置后导出 -| entrys.js // 整合所有路由配置并导出 -| routers -| user.js -| news.js -| util.js // 存放路由相关的工具函数 -| readme.md // 说明 -| 其他... -| sass // 存放样式文件的地方, 像列表，导航等闭着眼睛都知道会复用的样式不要命名太具体如news-list等，直接list1、list1，也不要写到页面对应的css中，而是提到外层防止一些边界情况发生。 -| _base // 存放变量、函数、reset等 -| block // 块级样式、如list、nav等 -| element // 原件级样式、如btn、radio、bredge等 -| layout // 布局级的样式 -| common.scss // 工具类和其他常用样式如动画等 -| main.scss // 导出各个功能块的样式 -| serve // 存放后端api等后端相关的文件 -| common.js // 无法用功能进行划分的接口 -| request.js // 根据项目封装后的请求方法 -| view -| layout // 各个路由的路由布局组件 -| base.jsx -| user.jsx -| style.css -| common // 可在各个功能中复用的业务组件 -| 功能1(login、register等, 对于体量不大的项目，可以直接用user表示注册登录等功能) -| api -| xxx.js -| module -| xxx1.js -| xxx2.js -| 功能1.css // 可在把该功能所有页面的样式集中到这里处理 -| common // 该功能各个页面中复用的业务组件 -| 页面1 -| 页面1.jsx -| 页面1-Head.jsx -| 页面1-List.jsx -| 页面1.css // 注意当使用路由分割时，页面级的css必须是纯的，样式不能作用于其他组件，因为打包后该样式只会在这个页面加载时加载。 -| 页面2 -| 页面2.jsx -| 页面2.css -| 功能2 -| ... -| components // 在各个页面复用的逻辑组件 -| loading -| loading.css -| loading.jsx