吐槽時間：

首先這是一個年底了.勞累了一年下來，收貨頗多。整體的開發有了結構，得到了認可了。18年預計也引入了新的技術到生產環境中了。工作除了等價交換之外，還獲得了無價的技術實踐經驗。

切入正題：

一、整體的單頁面應用涉及到的依賴與框架

前端： vue2.0+axios(由於vue-resource停更)+vuex+vue-router+巴拉巴拉其他小依賴比如babel-polyfill為了解決ie下非同步的支援

後端：lumen5.5(提倡的依賴注入，門面，資源化處理，中介軟體)

測試：phpunit->使用它比較簡單，只用了冰山一角的功能，只是用了對輸出斷言而已。暫時能滿足UI測試的底線吧

為什麼使用此方案：

1. vue夠簡單

2.lumen:laravel執行效率都被吐槽太慢了。但是lumen執行效率是不低於ci的。而且作為介面框架是沒有整體的mvc的結構，更多的是需要熱插拔和設計模式來規範開發（考慮到以後的維護問題）

3.本身個人就是個phper，只不過現在已經不知道自己到底是個什麼職業了。。。

二、vue前端構建

1.概念： vue的spa結構下的應用，強調的是樹狀結構，也是官方提倡使用的一種結構方式。所以一定要明白

“樹狀結構”“樹狀結構”“樹狀結構”！！！

3.目錄結構：

- app --前端專案的根目錄
 |- bulid  --系統下的啟動檔案等等，不做過多介紹
           |- webpack.base.conf.js  --主要介紹下這個檔案，由於用到了polyfill，需要吧這個檔案中的第13行，修改成app: ["babel-polyfill", "./src/main.js"]
 |

- config  --系統的預設配置項，比如預設的首頁，靜態資源，打包的目錄等等，不做過多介紹
 |- src --原始檔
   |- helper --幫助類目錄
          |- router --路由類目錄
          |- store  --管道目錄
          |- validate --驗證目錄
          |- view  --模板模組
          |- App.vue --掛載的跟元件
          |- main.js  -- 我們的入口檔案，主要作用是初始化vue例項並使用需要的外掛
 |- static --靜態資源目錄
 |- test  --測試的目錄（這裡沒用上，測試單獨拿出來做了）
 |- .babelrc 
 |- editorconfig
 |- .gitignore
 |- .postcssrc.js
 |- index.html

 |- package.json  --依賴的配置檔案

這裡著重說下package.json，以下是核心的幾個依賴版本。

"axios":"^0.17.1","babel-polyfill":"^6.26.0","iview":"^2.6.0","vue":"^2.5.2","vue-router":"^3.0.1","vuex":"^3.0.1"