摘自Berwin《Vue項目架構設計與工程化實踐》github.com/berwin/Blog/issues/14
1.Vue依賴套件
vuex：項目復雜后，用vuex來管理狀態
element-ui：基於vue2.0的組件庫
vue-router：單頁面應用必須使用的前端路由
axios：vue官方推薦的http客戶端
vue-cli：webpack模板，功能全。有hot reload,linting,testing,css extraction等
2.整體架構設計
表現層： Store Router View Component
業務層： 服務（Service）
API層： 接口API Mock + Validator
Util層： Util
基礎設施層：init(初始化配置文件) dev(開發環境) deploy(編譯源碼，靜態文件上傳cdn，Hera發步上線)
3.目錄結構
|——README.md
|——build #build腳本
|——config #prod/dev build config等文件
|——hera #代碼發布上線
|——index.html #最基礎的網頁
|——package.json
|——src #Vue.js核心業務
| |——App.vue #App Root Component
| |——api #接入后端服務的基礎API
| |——assets #靜態文件
| |——components #組件
| |——event-bus #Event Bus事件總線，類似EventEmitter
| |——main.js #Vue入口文件
| |——router #路由
| |——service #服務
| |——store #Vuex狀態管理
| |——util #通用utility，derective，mixin還有綁定到Vue.prototype的函數
| |——view #各個頁面
|——static #DevServer靜態文件
|——test #測試
4.模塊
表現層：
store Vuex狀態管理
router 前端路由
view 各業務頁面
component 通用組件
業務層：
service 處理服務端返回的數據（類似data format）例如service同時調用了不同的api，把不同的返回數據整合在一起發送到store中
API層：
api 請求數據，Mock數據，反向校驗后端api
Util層
util 存放項目全局的工具函數
... 如果項目需要，可寫一些vue指令
基礎設施層
init 自動化初始化配置文件
dev 啟動dev-server，hot-reload，http-proxy等輔助開發
deploy 編譯源碼，靜態文件上傳cdn，生成html，發布上線
全局事件機制
event-bus 主要用來處理特殊需求
5.特殊場景
1>在router中拿不到vue實例，無法直接操作vuex的方法，此時采用event-bus
2>生存周期不同步問題：event-bus的生存周期是全局的，只有在頁面刷新的時候，event-bus才會重置內部狀態，而組件的聲明周期相對來說短了很多
6.登錄功能邏輯
client ——請求數據——> server
<——返回未登錄錯誤碼——
——>跳轉 登錄中心
<——sid
——請求數據（攜帶sid）——>
<——返回數據 + 種cookie——
——請求數據（攜帶cookie）——>
<—— 返回數據 ——
1>監聽所有api的響應，如果未登錄后端會返回一個錯誤碼
2>如果后端返回