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、狀態管理；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);
});相關推薦：vue.js教學
以上是vue.js全家桶是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
