如何劃分應用的結構
拿到一個設計讶舰，前端人員想到的第一個問題應該就是，我該如何劃分前端程序結構金赦。按功能劃分是最常用的劃分方式了，在界面設計的時候对嚼，我們就已經(jīng)將功能歸類并整理了夹抗。同類功能被整合進一個頁面當中或一個導航頁面當中。而Vue是基于組件的框架纵竖。這里產(chǎn)生了一個問題：頁面和組件什么關系漠烧？
頁面與組件
頁面的概念要大于組件杏愤，一個頁面可能包含多個組件。而在實踐中已脓，一個組件最多只占一個頁面声邦。組件采用單個vue文件來定義。頁面采用html文件定義摆舟。PC端亥曹，H5端和App端在文件組織上有什么區(qū)別嗎？基本上恨诱，我需要將首頁對應到最頂層的index.html文件上媳瞪，在vue中就是App.vue。然后將各個頁面對應到各個vue組件照宝，頁面vue包含多個組件蛇受。這就是基本程序的劃分了。
如何劃分組件
從組件的大小上來說厕鹃，組件可以分為容器組件（也可以稱為頁面組件）和展示組件（小組件兢仰，真正的組件）。通常一個頁面就是一個容器組件剂碴。而展示組件怎么劃分把将？有哪些類別？這是問題的核心忆矛〔於祝基本上可以按照兩種分類標準進行劃分：一是按照功能劃分；二是按照頁面位置劃分催训。我認為這兩種方式是需要結合的洽议，可以在大的層面按照頁面位置來劃分，小的方面按照功能來劃分漫拭。
數(shù)據(jù)流的分析
確定了組件之后亚兄，我們還要梳理數(shù)據(jù)流，最后變成組件之間的通信采驻∩笈撸基本上，組件之間的通信可以分為人與組件的通信挑宠、父組件（也就是容器組件）與子組件的通信菲盾，以及子組件之間的通信，還有很重要的一點各淀，組件與后端服務器的通信懒鉴。
從可用的通信方式上來看：有props通信、axios通信、v-model通信临谱、人機交互事件響應通信璃俗、自定義事件通信。
父組件與子組件之間的向下通信悉默，采用props來定義城豁；子組件向父組件通信，采用事件來定義：子組件通過emit函數(shù)創(chuàng)建事件抄课；父組件通過@事件監(jiān)聽相應的事件并處理唱星。
組件與用戶之間的通信，可以采用@input事件來處理跟磨，可以使用v-model來簡寫间聊。組件內(nèi)部要emit發(fā)送input事件。
組件與服務器之間的通信采用axios庫完成抵拘，關鍵在于定義url路徑與數(shù)據(jù)哎榴。父組件，也就是容器組件或頁面涉及到與后端通信僵蛛，其它組件不涉及尚蝌。另外，組件內(nèi)部通信采用data充尉。
1容器組件與后端的通信
在容器組件加載時飘言，通過axios與后臺進行通信，獲取數(shù)據(jù)喉酌，保存到自己的data數(shù)據(jù)中热凹。
當有子組件需要向服務器傳送數(shù)據(jù)時泵喘，通過組件的事件響應函數(shù)泪电，在內(nèi)部通過axios發(fā)送給后端。
2子組件之間的通信
這一點需要單獨拿出來講纪铺，因為子組件之間的通信使用到了通信總線的概念相速。組件之間的通信，都通過總線進行傳輸鲜锚。發(fā)送方通過bus.emit方法來發(fā)送事件（事件名突诬，數(shù)據(jù)）；接收方通過bus.on監(jiān)聽事件芜繁，并提供回調處理數(shù)據(jù)（事件名旺隙，回調函數(shù)）。
3用戶與組件之間的交互
模塊劃分
從大到小骏令，從全局到細節(jié)蔬捷。模塊的劃分可能不會這么早，一開始可能考慮不到這么細節(jié)。但是它的概念周拐，有必要說一下铡俐。模塊是在組件下面的一個概念，比組件型姿凇审丘；組件一般都會帶界面、帶交互勾给；而模塊更多是不帶界面滩报，是一個單獨的JavaScript文件。模塊與模塊之間播急，采用變量和函數(shù)的直接調用進行通信露泊。
