前端模块化结构如何拆分

共计 490 个字符，预计需要花费 2 分钟才能阅读完成。

模块化结构
将复杂的程序拆分成不同的文件夹或者文件不同的模块即独立又可以相互关联
如何拆分
具体的拆分规则针对不同的项目也不一样，这里列出一点建议，更主要的还是有自己的一个规范，
物以类聚将具有相同特性的可以拆分到一起，比如在一个 vue 电商网站项目中对文件夹的拆分
pages 源文件入口
|-list 列表模块 (可能包括普通列表页，闪购列表) 都可以认为是列表页属于一类
|-list 普通列表页
|- components 组件
|- router 路由
|- store vuex
|- index.js 打包 js
|- 其它页面
按功能拆分
在上边的结构划分中，普通列表页有组件，路由，vuex, 还有打包入口，这些都可以看成模块，每个模块各自负责不同的功能，
components 负责存放普通列表页单独拥有的组件
router 负责路由
store 状态
index.js 等同于普通列表页容器组件
最终这些不同功能的模块组合成了一个完整的页面结构
这里只说了两种简单的拆分思想给大家做个入门，真正项目拆分过程其实也是这样，搞清楚自己的项目，文件结构如何拆分真正还是取决于自己，当然可以参考业界规范，一般情况下拆了就比不拆强，所以大家可以多尝试