這篇文章將為大家詳細講解有關vue.js全家桶有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
vue.js全家桶包有：1、【vue + vuex】狀態(tài)管理；2、【vue-router】路由；3、【vue-resource】；4、axios；5、UI框架。
vue.js全家桶包有：
vue全家桶：vue + vuex (狀態(tài)管理) + vue-router (路由) + vue-resource +axios +UI框架（iview、vant、elementUI等等）
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樣式，就是一個完整的vue項目的核心構(gòu)成。
概括起來就是：、1.項目構(gòu)建工具、2.路由、3.狀態(tài)管理、4.http請求工具。
下面單獨介紹
前言：Vue兩大核心思想：組件化和數(shù)據(jù)驅(qū)動。組件化：把整體拆分為各個可以復用的個體，數(shù)據(jù)驅(qū)動：通過數(shù)據(jù)變化直接影響bom展示，避免dom操作。
一、Vue-cli是快速構(gòu)建這個單頁應用的腳手架,
# 全局安裝 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ù)據(jù)管理。vuex主要由五部分組成：state action、mutation、getters、mudle組成。
使用流程是： 組件中可以直接調(diào)用上面四個部分除了mudle，
1、state
類似vue 對象的data, 用來存放數(shù)據(jù)以及狀態(tài)。存放的數(shù)據(jù)為響應式，如果數(shù)據(jù)改變，那么依賴數(shù)據(jù)的組件也會發(fā)生相應的改變。
獲取state的兩種方式例子：
第一種：
store.getters['getRateUserInfo']
第二種：
重慶分公司
重慶分公司
...mapGetters({
UserInfo: 'login/UserInfo', // 用戶信息
menuList: 'getMenuList', // approve 運價審批
RateUserInfo: 'getRateUserInfo' // Rate用戶信息
})注意：可以通過mapState把全局的state和 getters 映射到當前組件的 computed計算屬性中。
2、actions
Action 通過 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ù)接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調(diào)用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。
實踐中，我們會經(jīng)常用到 ES2015 的 參數(shù)解構(gòu) 來簡化代碼（特別是我們需要調(diào)用 commit 很多次的時候）：
actions:{
increment ({ commit }){
commit('increment')
}
}3、mutation
每個 mutation 都有一個字符串的 事件類型(type) 和一個 回調(diào)函數(shù)(handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)。
4、getters
Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當它的依賴值發(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官網(wǎng)推薦使用axios進行http調(diào)用。
安裝：
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);
});五、搭配UI框架如：iview、vant、elementUI
iview 一套基于 Vue的高質(zhì)量UI 組件庫(分為小程序和pc端等不同版本)；
vant 輕量、可靠的移動端 Vue 組件庫,是有贊開源的一套基于 Vue 2.0 的 Mobile 組件庫,旨在更快、更簡單地開發(fā)基于 Vue 的美觀易用的移動站點。
Ant Design Vue 是 Ant Design 的 Vue 實現(xiàn)，開發(fā)和服務于企業(yè)級后臺產(chǎn)品。
elementUI 是基于 Vue 2.0 桌面端中后臺組件庫。
關于“vue.js全家桶有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
