基於螞蟻金服「如何管理好10萬行代碼」搭建了 Vue 項目架構

此文是對螞蟻金服文章的解讀，因此要看懂此文必定要先去看原文：如何管理好10萬行代碼的前端單頁面應用。

當時看到螞蟻金服這篇文章有點茅塞頓開，只不過他們是基於 React 技術棧開發的，可是架構是一種思想，不區分語言不區分框架的，因此我相信這套架構必定能夠應用到 Vue 項目中。廢話很少說，直接進入正文。

同一「頁面」內的模塊再劃分

這裏意思是每一個頁面劃分爲 MVC 結構。那麼如何用代碼提現 MVC 結構呢。對於 Vue 項目中，難點在於 MC 兩層。最後小組討論用 Vuex 來架構 MC 兩層，以下圖所示。

領域模型

領域模型是指可跨模塊複用的公共數據，因此咱們也用 Vuex 來架構它，存放目錄以下。

視圖型組件和容器型組件

這一點要在 Vue 中實現其實也很好作，請看這篇文章。可是咱們這邊基於業務考慮，暫時以爲不必弄得這麼細，因此通用業務組件這一塊，在咱們 Vue 項目架構就沒采用視圖和容器這種組合方式了。

跨模塊通訊

爲了保證模塊的純粹性，因此跨模塊通訊採用中介者模式來解耦。咱們創建了一個 pageTalk 目錄用中介者模式來處理跨模塊通訊。

總結

以上即是咱們基於螞蟻這套架構實現了 Vue 架構版。此套架構實現僅爲我方團隊的理解，不能做爲標準，但能夠爲你們提供參考價值。

歡迎入羣交流

源碼下載