在vue中,模塊化就是把單獨的一個功能封裝到一個模塊(文件)中,模塊之間相互隔離,但是可以通過特定的接口公開內部成員,也可以依賴別的模塊(方便代碼的重用,從而提升開發效率,并且方便后期的維護)。模塊化開發的好處:1、條理清晰,便于維護;2、不會一次將所有數據請求回來,用戶體驗感好;3、模塊之間相互隔離,但是可以通過特定的接口公開內部成員,也可以依賴別的模塊。

本教程操作環境:windows7系統、vue3版,DELL G3電腦。
什么是模塊化
我們說Vue項目是按照模塊進行劃分的,那么什么是模塊呢?
模塊化,就相當于我們網站的導航欄,那么每一個導航項就可以看作是如下圖片中提到的

- 
模塊化,就好比是一個大的功能項,那么這個大的功能項又可以包含多個組件。
 - 
在使用的時候,單個模塊對應的是我們Vue項目下compentent下的文件目錄
 - 
每一個模塊下面又可以有多個組件,這些組件又組成了完整的模塊頁面(單頁面)
 - 
但是每一個模塊下面必須要有一個主要的文件(模塊父組件),這個文件必須在路由管理中(router/index.js)進行注冊,注冊的時候滿足以下形式:
 
export default new Router({   mode: 'history',   routes: [ 		{       path: '/',       name: 'Default',       redirect: '/home',       component: Home    }]     })
其余的組件可以通過以下的方式進行注入使用。在使用的時候,將組件的name屬性中的名稱在父組件中進行標簽化處理(vue會將以駝峰命名的名稱進行轉化——–(BookManager——>book-manager))
- 首先要在用到的頁面中的中通過import進行導入
 - 
其次需要在compent中進行注冊,注冊的時候會使用組件的name屬性進行注入
 
總結:
模塊化就是把單獨的一個功能封裝到一個模塊(文件)中,模塊之間相互隔離,但是可以通過特定的接口公開內部成員,也可以依賴別的模塊(方便代碼的重用,從而提升開發效率,并且方便后期的維護)。
為什么要使用模塊化?使用模塊化的好處
當然,不使用模塊化開發也能實現頁面的所有功能,但是會加重對服務器請求的壓力和降低用戶的體驗,當頁面需要的數據過多時,一次請求就包含了所有請求的數據,如果用戶不需要呢?這樣的請求還有效果嗎!當然是沒效果的,所以,利用模塊化開發的思想就能解決這類問題
簡單談談自己對模塊化開發使用的好處
1、條理清晰,便于維護
2、不會一次將所有數據請求回來,用戶體驗感好
3、模塊之間相互隔離,但是可以通過特定的接口公開內部成員,也可以依賴別的模塊
模塊化和組件化的對比
1、組件化是獨立和可復用的代碼組織單元。組件系統是vue核心特性之一,它使開發者使用小型、獨立和通常可復用的組件構建大型應用;
2、組件化開發能大幅度提高應用開發效率、測試性、復用性等;
3、組件使用按分類有:頁面組件、業務組件、通用組件;
4、vue的組件是基于配置的,我們通常編寫的組件是組件配置而非組件,框架后續會生成其構造函數,它們基于VueComponent,擴展于Vue;
5、vue中常見組件化技術有屬性prop,自定義事件,插槽等,它們主要用于組件通信、擴展等;
6、合理的劃分組件,有助于提高應用性能;
7、組件應該是高內聚、低耦合的;
8、遵循單向數據流的原則。
他們的區別在于
模塊化:是從代碼邏輯的角度進行劃分;方便代碼進行分層開發,保證每個功能模塊的職能單一
組件化:是從UI界面的角度進行劃分,前端的組件化,方便UI組件的復用【
站長資訊網