使用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（組件路由跳轉後） 這方面我自己做的也不是很好，只懂的如何使用，還是要繼續學習~

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