在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組件的復用【