vue.js全家桶是完整的vue項目的核心構成，包括vue-router、vuex、vue-resource、vue-cli和sass樣式。vue-cli是快速構建單頁應用的腳手架。

vue全家桶：

包含了vue-router，vuex，vue-resource，再加上構建工具vue-cli，sass樣式，這些是一個完整的vue項目的核心構成。

（學習視頻分享：javascript視頻教程）

概括起來就是：

1、項目構建工具；2、路由；3、狀態(tài)管理；4、http請求工具。

詳細介紹：

Vue兩大核心思想：組件化和數(shù)據驅動。

組件化：把整體拆分為各個可以復用的個體；

數(shù)據驅動：通過數(shù)據變化直接影響bom展示，避免dom操作。

一、Vue-cli是快速構建這個單頁應用的腳手架,

# 全局安裝 vue-cli $ npm install --global vue-cli # 創(chuàng)建一個基于 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應用程序開發(fā)的狀態(tài)管理可以理解為全局的數(shù)據管理。vuex主要由五部分組成：state action、mutation、getters、mudle組成。

使用流程是： 組件中可以直接調用上面四個部分除了mudle，

1、state

類似vue 對象的data, 用來存放數(shù)據以及狀態(tài)。存放的數(shù)據為響應式，如果數(shù)據改變，那么依賴數(shù)據的組件也會發(fā)生相應的改變。

獲取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 方法觸發(fā)：action支持異步調用（可以調用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ù)接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。

實踐中，我們會經常用到 ES2015 的 參數(shù)解構 來簡化代碼（特別是我們需要調用 commit 很多次的時候）：

actions:{   increment ({ commit }){     commit('increment')   } }

3、mutation

每個 mutation 都有一個字符串的 事件類型(type) 和一個 回調函數(shù)(handler)。這個回調函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)。

4、getters

Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發(fā)生了改變才會被重新計算

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 映射到局部計算屬性。

四、axios

axios是一個http請求包，vue官網推薦使用axios進行http調用。

安裝：

npm install axios --save

例子：

（1）發(fā)送一個GET請求

//通過給定的ID來發(fā)送請求 axios.get('/user?ID=12345')   .then(function(response){     console.log(response);   })   .catch(function(err){     console.log(err);   }); //以上請求也可以通過這種方式來發(fā)送 axios.get('/user',{   params:{     ID:12345   } }) .then(function(response){   console.log(response); }) .catch(function(err){   console.log(err); });

（2）發(fā)送一個POST請求

axios.post('/user',{   firstName:'Fred',   lastName:'Flintstone' }) .then(function(res){   console.log(res); }) .catch(function(err){   console.log(err); });