vue.js全家桶是什么意思-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)vue.js全家桶是什么意思，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

專(zhuān)注于為中小企業(yè)提供做網(wǎng)站、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)惠濟(jì)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

vue.js全家桶是完整的vue項(xiàng)目的核心構(gòu)成，包括vue-router、vuex、vue-resource、vue-cli和sass樣式。vue-cli是快速構(gòu)建單頁(yè)應(yīng)用的腳手架。

vue全家桶：

包含了vue-router，vuex，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)求工具。

詳細(xì)介紹：

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
# 安裝依賴(lài)，走你
$ 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為專(zhuān)門(mén)為vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理可以理解為全局的數(shù)據(jù)管理。vuex主要由五部分組成：state  action、mutation、getters、mudle組成。

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

1、state

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

獲取state的兩種方式例子：

（1）

store.getters['getRateUserInfo']

（2）

...mapGetters({
        UserInfo: 'login/UserInfo', // 用戶(hù)信息
        menuList: 'getMenuList', // approve 運(yùn)價(jià)審批
        RateUserInfo: 'getRateUserInfo' // Rate用戶(hù)信息
   })

注意：可以通過(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è)字符串的 事件類(lèi)型(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)被緩存起來(lái)，且只有當(dāng)它的依賴(lài)值發(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);
});

關(guān)于“vue.js全家桶是什么意思”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

文章標(biāo)題：vue.js全家桶是什么意思-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://www.muchs.cn/article30/sphso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、軟件開(kāi)發(fā)、小程序開(kāi)發(fā)、外貿(mào)建站、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)