此文是對螞蟻金服文章的解讀，所以要看懂此文一定要先去看原文：如何管理好10萬行程式碼的前端單頁面應用。
當時看到螞蟻金服這篇文章有點茅塞頓開，只不過他們是基於 React 技術棧開發的，但是架構是一種思想，不區分語言不區分框架的，所以我相信這套架構一定可以應用到 Vue 專案中。廢話不多說，直接進入正文。
同一“頁面”內的模組再劃分
這裡意思是每個頁面劃分為 MVC 結構。那麼如何用程式碼提現 MVC 結構呢。對於 Vue 專案中，難點在於 MC 兩層。最後小組討論用 Vuex 來架構 MC 兩層，如下圖所示。
領域模型
領域模型是指可跨模組複用的公共資料，所以我們也用 Vuex 來架構它，存放目錄如下。
檢視型元件和容器型元件
這一點要在 Vue 中實現其實也很好做，請看這篇文章。但是我們這邊基於業務考慮，暫時覺得沒必要弄得這麼細，所以通用業務元件這一塊，在我們 Vue 專案架構就沒采用檢視和容器這種組合方式了。
跨模組通訊
為了保證模組的純粹性，所以跨模組通訊採用中介者模式來解耦。我們建立了一個 pageTalk 目錄用中介者模式來處理跨模組通訊。
總結
以上便是我們基於螞蟻這套架構實現了 Vue 架構版。此套架構實現僅為我方團隊的理解，不能作為標準，但可以為大家提供參考價值。
歡迎入群交流
