vue2.0下的spa整體方案(一)-整體的結構與框架的應用
吐槽時間:
首先這是一個年底了.勞累了一年下來,收貨頗多。整體的開發有了結構,得到了認可了。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"]
|
|- src --原始檔
|- helper --幫助類目錄
|- router --路由類目錄
|- store --管道目錄
|- validate --驗證目錄
|- view --模板模組
|- App.vue --掛載的跟元件
|- main.js -- 我們的入口檔案,主要作用是初始化vue例項並使用需要的外掛
|- static --靜態資源目錄
|- test --測試的目錄(這裡沒用上,測試單獨拿出來做了)
|
|- 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"