Vue 全家桶介紹-超詳細教程
Vue 全家桶介紹
Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上構建工具vue-cli，sass樣式,就是一個完整的vue專案的核心構成。
概括起來就是：、1.專案構建工具、2.路由、3.狀態管理、4.http請求工具。
下面單獨介紹
前言：Vue兩大核心思想：元件化和資料驅動。元件化：把整體拆分為各個可以複用的個體，資料驅動：通過資料變化直接影響bom展示，避免dom操作。
一、Vue-cli是快速構建這個單頁應用的腳手架,
# 全域性安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新專案
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
二、vue-router
安裝：npm installvue-router
如果在一個模組化工程中使用它，必須要通過Vue.use()明確地安裝路由功能：
import Vue from'vue'
import VueRouter from'vue-router'
Vue.use(VueRouter)
另外注意在使用中，可以利用vue的過渡屬性來渲染出切換頁面的效果。
三、vuex
vuex為專門為vue.js應用程式開發的狀態管理可以理解為全域性的資料管理。vuex主要由五部分組成：state action、mutation、getters、mudle組成。
使用流程是： 元件中可以直接呼叫上面四個部分除了mudle，
1、state
類似vue 物件的data, 用來存放資料以及狀態。存放的資料為響應式，如果資料改變，那麼依賴資料的元件也會發生相應的改變。
獲取state的兩種方式例子：
1.store.getters['getRateUserInfo']
2. ...mapGetters({
UserInfo: 'login/UserInfo', // 使用者資訊
menuList: 'getMenuList', // approve 運價審批
RateUserInfo: 'getRateUserInfo' // Rate使用者資訊
})
注意：可以通過mapState把全域性的state和 getters 對映到當前元件的 computed計算屬性中。
2、actions
Action 通過store.dispatch方法觸發：action支援非同步呼叫（可以呼叫api），mutation只支援操作同步，並且action提交的是 mutation，而不是直接變更狀態。
例如：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Action 函式接受一個與 store 例項具有相同方法和屬性的 context 物件，因此你可以呼叫context.commit提交一個 mutation，或者通過context.state和context.getters來獲取 state 和 getters。
實踐中，我們會經常用到 ES2015 的引數解構來簡化程式碼（特別是我們需要呼叫commit很多次的時候）：
actions:{
increment ({ commit }){
commit('increment')
}
}
3、mutation
每個 mutation 都有一個字串的事件型別(type)和一個回撥函式(handler)。這個回撥函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個引數。
4、getters
Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算
const getters = {
getRateInitData: state => state.rateInitData,
getchooseRateObj: state => state.chooseRateObj,
getSearchRateParams: state => state.searchRateParams,
getSearchRateResult: state => state.searchRateResult,
getRateUserInfo: state => state.RateUserInfo,
getMenuList: state => state.menuList,
getRateQueryParams: state => state.rateQueryParams,
getRateQueryResult: state => state.rateQueryResult,
getCheckRateDetailParams: state => state.checkRateDetailParams,
getReferenceCondition: state => state.referenceCondition,
getWaitApprovalParams: state => state.waitApprovalParams
}
mapGetters輔助函式
mapGetters輔助函式僅僅是將 store 中的 getter 對映到區域性計算屬性：
四、axios
axios是一個http請求包，vue官網推薦使用axios進行http呼叫。
安裝：
npm install axios --save
例子：
1.傳送一個GET請求
//通過給定的ID來發送請求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
//以上請求也可以通過這種方式來發送
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
2、傳送一個POST請求
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});
具體參考：https://www.jianshu.com/p/df464b26ae58