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

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

同一“頁面”內的模塊再劃分

這里意思是每個頁面劃分為 MVC 結構。那么如何用代碼提現 MVC 結構呢。對于 Vue 項目中，難點在于 MC 兩層。最后小組討論用 Vuex 來架構 MC 兩層，如下圖所示。

領域模型

領域模型是指可跨模塊復用的公共數據，所以我們也用 Vuex 來架構它，存放目錄如下。

視圖型組件和容器型組件

這一點要在 Vue 中實現其實也很好做，請看這篇文章。但是我們這邊基于業務考慮，暫時覺得沒必要弄得這么細，所以通用業務組件這一塊，在我們 Vue 項目架構就沒采用視圖和容器這種組合方式了。

跨模塊通信

為了保證模塊的純粹性，所以跨模塊通信采用中介者模式來解耦。我們建立了一個 pageTalk 目錄用中介者模式來處理跨模塊通信。

總結

以上便是我們基于螞蟻這套架構實現了 Vue 架構版。此套架構實現僅為我方團隊的理解，不能作為標準，但可以為大家提供參考價值。

歡迎入群交流

源碼下載

總結

以上是生活随笔為你收集整理的基于蚂蚁金服「如何管理好10万行代码」搭建了 Vue 项目架构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。