前端模塊化結構如何拆分

模塊化結構

將複雜的程序拆分紅不一樣的文件夾或者文件
不一樣的模塊即獨立又能夠相互關聯

如何拆分

具體的拆分規則針對不一樣的項目也不同，這裏列出一點建議，更主要的仍是有本身的一個規範，

物以類聚
將具備相同特性的能夠拆分到一塊兒，好比在一個vue電商網站項目中對文件夾的拆分

pages 源文件入口
    |-list 列表模塊(可能包括普通列表頁，閃購列表) 均可以認爲是列表頁屬於一類
        |-list 普通列表頁
            |- components 組件
            |- router 路由
            |- store vuex
            |- index.js 打包js
        |-其它頁面

按功能拆分

在上邊的結構劃分中，普通列表頁有組件，路由，vuex,還有打包入口，這些均可以當作模塊，每一個模塊各自負責不一樣的功能，
        components 負責存放普通列表頁單獨擁有的組件
        router 負責路由
        store 狀態
        index.js 等同於普通列表頁容器組件
 最終這些不一樣功能的模塊組合成了一個完整的頁面結構

這裏只說了兩種簡單的拆分思想給你們作個入門，真正項目拆分過程其實也是這樣，搞清楚本身的項目，
文件結構如何拆分真正仍是取決於本身，固然能夠參考業界規範，通常狀況下拆了就比不拆強，因此你們能夠多嘗試