Vue有著名的全家桶系列岗钩，包含了vue-router（http://router.vuejs.org）纽窟，vuex（http://vuex.vuejs.org）肖油， vue-resource（https://github.com/pagekit/vue-resource）。再加上構(gòu)建工具vue-cli臂港，sass樣式,就是一個(gè)完整的vue項(xiàng)目的核心構(gòu)成森枪。
概括起來(lái)就是：、1.項(xiàng)目構(gòu)建工具审孽、2.路由县袱、3.狀態(tài)管理、4.http請(qǐng)求工具佑力。
下面單獨(dú)介紹
前言：Vue兩大核心思想：組件化和數(shù)據(jù)驅(qū)動(dòng)式散。組件化：把整體拆分為各個(gè)可以復(fù)用的個(gè)體，數(shù)據(jù)驅(qū)動(dòng)：通過(guò)數(shù)據(jù)變化直接影響bom展示打颤，避免dom操作暴拄。
一漓滔、Vue-cli是快速構(gòu)建這個(gè)單頁(yè)應(yīng)用的腳手架,
#?全局安裝?vue-cli
$ npm install --global vue-cli
#?創(chuàng)建一個(gè)基于?webpack?模板的新項(xiàng)目
$ vue init webpack my-project
#?安裝依賴，走你
$?
cd?my-project
$ npm install
$ npm run dev
二乖篷、vue-router
安裝：npm installvue-router
如果在一個(gè)模塊化工程中使用它响驴，必須要通過(guò)?Vue.use()?明確地安裝路由功能：
import Vue from'vue'
import VueRouter from'vue-router'
Vue.use(VueRouter)
另外注意在使用中，可以利用vue的過(guò)渡屬性來(lái)渲染出切換頁(yè)面的效果撕蔼。
三豁鲤、vuex
vuex為專門為vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理可以理解為全局的數(shù)據(jù)管理。vuex主要由五部分組成：state ?action鲸沮、mutation琳骡、getters、module組成诉探。
使用流程是： 組件中可以直接調(diào)用上面四個(gè)部分除了module日熬，
1、state
類似vue?對(duì)象的data,?用來(lái)存放數(shù)據(jù)以及狀態(tài)肾胯。存放的數(shù)據(jù)為響應(yīng)式竖席，如果數(shù)據(jù)改變，那么依賴數(shù)據(jù)的組件也會(huì)發(fā)生相應(yīng)的改變敬肚。
獲取state的兩種方式例子：
1.store.getters['getRateUserInfo']
2. ...mapGetters({
??????? UserInfo: 'login/UserInfo', // 用戶信息
??????? menuList: 'getMenuList', // approve 運(yùn)價(jià)審批
??????? RateUserInfo: 'getRateUserInfo' // Rate用戶信息
?? })
注意：可以通過(guò)mapState把全局的state和 getters 映射到當(dāng)前組件的 computed計(jì)算屬性中毕荐。
2、actions
Action?通過(guò)?store.dispatch?方法觸發(fā)：action支持異步調(diào)用（可以調(diào)用api）艳馒，mutation只支持操作同步憎亚，并且action提交的是?mutation，而不是直接變更狀態(tài)弄慰。
例如：
const store = new Vuex.Store({
? state: {
??? count: 0
? },
? mutations: {
??? increment (state) {
????? state.count++
??? }
? },
? actions: {
??? increment (context) {
????? context.commit('increment')
??? }
? }
})
Action?函數(shù)接受一個(gè)與?store?實(shí)例具有相同方法和屬性的?context?對(duì)象第美，因此你可以調(diào)用?context.commit?提交一個(gè)?mutation，或者通過(guò)?context.state?和?context.getters?來(lái)獲取?state?和?getters陆爽。
實(shí)踐中什往，我們會(huì)經(jīng)常用到?ES2015?的?參數(shù)解構(gòu)?來(lái)簡(jiǎn)化代碼（特別是我們需要調(diào)用?commit?很多次的時(shí)候）：
actions:{
? increment ({ commit }){
??? commit('increment')
? }
}
3、mutation
每個(gè)?mutation?都有一個(gè)字符串的事件類型(type)和一個(gè)回調(diào)函數(shù)(handler)慌闭。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方别威，并且它會(huì)接受?state?作為第一個(gè)參數(shù)。
4驴剔、getters
Vuex?允許我們?cè)?store?中定義“getter”（可以認(rèn)為是?store?的計(jì)算屬性）省古。就像計(jì)算屬性一樣，getter?的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)丧失，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算
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?輔助函數(shù)
mapGetters?輔助函數(shù)僅僅是將?store?中的?getter?映射到局部計(jì)算屬性：
四豺妓、axios
axios是一個(gè)http請(qǐng)求包，vue官網(wǎng)推薦使用axios進(jìn)行http調(diào)用。
安裝：
npm install axios --save
例子：
1.發(fā)送一個(gè)GET請(qǐng)求
//通過(guò)給定的ID來(lái)發(fā)送請(qǐng)求
axios.get('/user?ID=12345')
? .then(function(response){
??? console.log(response);
? })
? .catch(function(err){
??? console.log(err);
? });
//以上請(qǐng)求也可以通過(guò)這種方式來(lái)發(fā)送
axios.get('/user',{
? params:{
??? ID:12345
? }
})
.then(function(response){
? console.log(response);
})
.catch(function(err){
? console.log(err);
});
2琳拭、發(fā)送一個(gè)POST請(qǐng)求
axios.post('/user',{
? firstName:'Fred',
? lastName:'Flintstone'
})
.then(function(res){
? console.log(res);
})
.catch(function(err){
? console.log(err);
});
具體參考：http://www.reibang.com/p/df464b26ae58
