為更好地實施我們的業務需求，需要一些規則或思考來幫助我們設計架構我們的前端工程,本文將以vue專案為例，討論如何設計與實施我們的專案架構，來滿足版本的迭代、更新.元件
元件：乙個個的可復用單元，單頁面程式的元件跟傳統的ui元件稍有不同，不僅僅包含了樣式，也包含了容器元素。可以泛化元件，抽取出一些引數，根據引數來渲染為不同的檢視。
全域性元件
一次註冊，遍地使用，方便。適用於高頻使用的元件，會增加效能開銷。
區域性元件
使用一次註冊一次，適用於低頻使用的元件，節省效能。
**結構
註冊全域性元件更好的寫法
const globalcompoes = require.
context
(// 其元件目錄的相對路徑
'./components/global'
,// 是否查詢其子目錄
false
,// 匹配基礎元件檔名的正規表示式
/[a-za-z]
+\-[a-za-z]
+\.vue$/
)//遍歷並註冊全域性元件
globalcompoes .
keys()
.foreach
(filename =>
)
將檢視分為乙個個的元件，增強復用性的同時也造成了彼此狀態的隔離，使用者看到的是乙個頁面，頁面裡的乙個個元件之間溝通交流是無法避免的事實—需要通訊。我們將之分為父子元件間的通訊和非父子間通訊。
父子元件通訊
非父子元件間的通訊
我們使用狀態管理模式 vuex,來管理元件之間狀態的共享。
// store.js
import vue from
'vue'
import vuex from
'vuex'
vue.
use(vuex)
const state =
const mutations =
const getters =
const actions =
export
default
newvuex.store()
import store from
'./store.js'
newvue
()
樣式與容器，構成了檢視。我們所謂地ui指ui檢視
元件是否包含布局？
答案時肯定的，如果我們講布局放在了元件之外，那麼請問，元件所有的導向能否保持一致和統一，如果不能，那麼元件就是存在特定布局的，那麼既然存在這特定的布局，為何我們還拘泥與脫離布局包裝。
所以布局必須在元件內組織。模組化style是有必要的（scoped標識）。
元件的ui設計與組織
因此，我們有必要通過sass預處理語言來組織我們的ui結構
這樣我們就講元件的布局與外觀分離，更方便維護了，雖然增加了適當的冗餘，但是恰到好處，結構清晰，也好擴充套件。
前端架構設計
前端架構師們認為有多個關鍵的決策需要在專案啟動之初就制定下來，如果等到開發階段的後期再考慮，不是已經用不上，而是一開始錯誤的決定已經造成了無法挽回的損失。一旦做出這些決策，我們的任務就是去輔助視覺設計 平台開發 底層結構，使之能最大程度滿足需求。如果我們有這樣的機會，那麼可以建立乙個很長的願望清單 ...
前端架構設計 層次設計
我們在開發的不同階段，構成的架構因素是不同的，基於這個思路，架構可以分為 系統級架構 應用級架構 模組級架構 級架構 應用在整個系統內的關係，如與後台服務如何通訊，與第三方系統如何整合。在設計前端的時候，首先應該考慮的，是前端系統與其他系統之間是怎樣的關係。這種關係包含，業務關係和協作機制，比如與其...
vue專案結構設計
感覺這個寫的挺詳細的，要詳細了解可以看這個 結構詳細介紹 vue專案結構圖 簡單介紹 build目錄是一些webpack的檔案，配置引數什麼的，一般不用動 config是vue專案的基本配置檔案 node modules是專案中安裝的依賴模組 src原始碼資料夾，基本上檔案都應該放在這裡。asset...