回顧vue開發spa（踩坑記錄）

　　　　使用vueJS開發前端頁面差很少也有大半多年了。因爲項目後臺管理頁面最先都是使用JQ進行開發的，剛開始使用vue的時候，只能是直接在頁面裏面引入vueJS框架進行開發，期間把項目後臺的編輯頁面和其餘複雜頁面所有改用vueJS的了（沒有用到組件，只是加強了一下交互，開發更簡單便捷）。因爲工期和我的習慣問題，期間也留下了不少坑和隱患，好比很多頁面是JQ和vue混用，致使後來改功能的時候痛不欲生……

　　　　因此最近有一個新的後臺管理頁面，索性使用vue全家桶（vue,vue-router,vue-cil,vue-resource）進行開發了，組件之間的關聯性不是很大，因此沒用到vuex，狀態傳遞我更多的是使用query參數進行傳遞(也就是get參數)。

　　　　下面就會說到在項目開發中遇到的各類問題了。

　　　　首先一開始的是，必定要用CNPM下載依賴！！！有遇到莫名其妙的問題話，刪除依賴再從新下載通常是能夠解決的

　　　　最坑的一次是，依賴下載沒問題，已經開始開發好幾天了，忽然啓動不了（npm run dev報錯，npm run build能夠），嘗試刪除依賴，重裝CNPM,NPM,webpack,nodeJS仍是不能解決……最後沒辦法只好重裝電腦才終於能夠啓動運行了。

　　　   只要理解vue的組件、父子組件的消息狀態傳遞(props/events)，那麼你就能夠開始使用vue寫SPA頁面了。其餘東西均可以邊看API邊寫

　　　　.vue文件其實就是一段js模塊，由vue-loader去進行解析成js，咱們在使用webpack編譯運行的時候：webpack會幫咱們初始化全部的JS模塊，當你須要的時候自動去請求指定模塊進行渲染。

　　　　vue-resource本質上是跟JQ的ajax方法是同樣的，你能夠直接在mainJs裏面進行全局請求的校驗攔截（例如驗證是否登錄之類）

this.$http({
    method:'GET',
    url:'',
    body:{},
    headers: {},
    emulateJSON: true
}).then(function(success){},function(error){})
//是否是感受跟JQ的ajax相差無幾

　　　　常常有人在羣裏問如何在vue或者react裏面ajax……建議若是是對JavaScript的ajax不是很清楚的話（HTTP協議也是必需要了解的），先去了解一下XMLHttpRequest對象，這樣無論是遇到什麼前端框架，寫ajax請求都是沒有問題滴~

　　　　瞭解vue-router的各類鉤子函數方法，路由機制和使用，經常使用的鉤子函數無非是beforeEach(組件路由跳轉前)，afterEach（組件路由跳轉後） 這方面我本身作的也不是很好，只懂的如何使用，仍是要繼續學習~