Vue項目架構設計與工程化實踐

摘自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>若是後端返回