為更好地實施我們的業務需求，需要一些規則或思考來幫助我們設計架構我們的前端工程,本文將以Vue專案為例，討論如何設計與實施我們的專案架構，來滿足版本的迭代、更新.

元件

元件：一個個的可複用單元，單頁面程式的元件跟傳統的UI元件稍有不同，不僅僅包含了樣式，也包含了容器元素。可以泛化元件，抽取出一些引數，根據引數來渲染為不同的檢視。

全域性元件

一次註冊，遍地使用，方便。適用於高頻使用的元件，會增加效能開銷。

區域性元件

使用一次註冊一次，適用於低頻使用的元件，節省效能。

程式碼結構

• components
  • global
  • local
• 註冊全域性元件更好的寫法

const globalCompoes =
 
 require.context(
  // 其元件目錄的相對路徑
  './components/global',
  // 是否查詢其子目錄
  false,
  // 匹配基礎元件檔名的正則表示式
  /[a-zA-Z\w]+\-[a-zA-Z\w]+\.vue$/
)
//遍歷並註冊全域性元件
globalCompoes .keys().forEach(fileName => {
  // 獲取元件配置
  // ./article-button.vue
  const componentConfig = requireComponent(fileName)
  //去除檔名中的 './'和'.vue'字元
  const
 
 componentName = fileName.replace(/\.\/|\.vue/g,'')
  // 全域性註冊元件
  Vue.component(
    componentName,
    // 如果這個元件選項是通過 `export default` 匯出的，
    // 那麼就會優先使用 `.default`，
    // 否則回退到使用模組的根。
    componentConfig.default || componentConfig
  )
})

元件間的通訊

將檢視分為一個個的元件，增強複用性的同時也造成了彼此狀態的隔離，使用者看到的是一個頁面，頁面裡的一個個元件之間溝通交流是無法避免的事實—需要通訊。我們將之分為父子元件間的通訊

父子元件通訊

• 父元件props 值 到子元件，子元件監聽props值的變化，來調整檢視。
• 子元件的變化通過 emit 事件的形式通知到父元件，父元件通過監聽子元件的emit事件來知曉變化。

非父子元件間的通訊

我們使用狀態管理模式 vuex,來管理元件之間狀態的共享。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
}
const mutations = {
}
const getters = {
}
const actions = {
}
export default new Vuex.Store({
	state,
	getters,
	mutations,
	actions
})
//main.js
import store from './store.js'
new Vue({
	el: '#app',
  	router,
  	store,
})

• 公共state,或者基層state,被元件強烈依賴的狀態：驗證狀態、登入狀態、使用者名稱、使用者許可權…這些狀態有個共同點：需要一次初始化。其他元件依賴於這些狀態，而且非資料性狀態.資料性狀態形如：群列表、文章列表。
• 啥時候用到actions？當我們需要初始化一些狀態的時候，比如公共state,我們將具體的api請求寫到actions裡,在根節點dispath對應的action.寫入store,並寫入sessionStorage（防止頁面重新整理 store丟失）
• 資料狀態則不要結合actions,會帶來程式碼冗餘。
• 如果對響應式要求沒那麼高，使用sessionStorage或者localStorage也未嘗不可。

UI部分