vue全家桶是什么

本篇內(nèi)容介紹了“vue全家桶是什么”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

　　Vue有著名的全家桶系列，包含了vue-router，vuex， vue-resource。再加上構(gòu)建工具vue-cli，sass樣式,就是一個完整的vue項目的核心構(gòu)成。

概括起來就是：

　　1、項目構(gòu)建工具

　　2、路由

　　3、狀態(tài)管理

　　4、http請求工具。

下面單獨(dú)介紹

　　前言：Vue兩大核心思想：組件化和數(shù)據(jù)驅(qū)動。組件化：把整體拆分為各個可以復(fù)用的個體，數(shù)據(jù)驅(qū)動：通過數(shù)據(jù)變化直接影響bom展示，避免dom操作。

一、Vue-cli是快速構(gòu)建這個單頁應(yīng)用的腳手架,

# 全局安裝 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應(yīng)用程序開發(fā)的狀態(tài)管理可以理解為全局的數(shù)據(jù)管理。vuex主要由五部分組成：state  action、mutation、getters、mudle組成。

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

1、state

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

獲取state的兩種方式例子：

1.store.getters['getRateUserInfo']

2. ...mapGetters({

UserInfo: 'login/UserInfo', // 用戶信息

menuList: 'getMenuList', // approve 運(yùn)價審批

RateUserInfo: 'getRateUserInfo' // Rate用戶信息

})

注意：可以通過mapState把全局的state和 getters 映射到當(dāng)前組件的 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 實(shí)例具有相同方法和屬性的 context 對象，因此你可以調(diào)用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。

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

3、mutation

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

4、getters

　　Vuex 允許我們在 store 中定義“getter”（可以認(rèn)為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(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進(jìn)行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);});

“vue全家桶是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！