您好,登錄后才能下訂單哦!
小編給大家分享一下Vue著名的全家桶系列是什么,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
Vue有著名的全家桶系列,包含了vue-router
,vuex
, vue-resource
。再加上構(gòu)建工具vue-cli
,sass
樣式,就是一個(gè)完整的vue項(xiàng)目的核心構(gòu)成。
概括起來就是:
1、項(xiàng)目構(gòu)建工具
2、路由
3、狀態(tài)管理
4、http請求工具。
下面單獨(dú)介紹
前言:Vue兩大核心思想:組件化和數(shù)據(jù)驅(qū)動(dòng)。組件化:把整體拆分為各個(gè)可以復(fù)用的個(gè)體,數(shù)據(jù)驅(qū)動(dòng):通過數(shù)據(jù)變化直接影響bom展示,避免dom操作。
一、Vue-cli是快速構(gòu)建這個(gè)單頁應(yīng)用的腳手架,
# 全局安裝 vue-cli $ npm install --global vue-cli # 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目 $ vue init webpack my-project # 安裝依賴,走你 $ cd my-project $ npm install $ npm run dev
二、vue-router
安裝:npm installvue-router
如果在一個(gè)模塊化工程中使用它,必須要通過 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)用上面四個(gè)部分除了mudle,
1、state
類似vue 對(duì)象的data, 用來存放數(shù)據(jù)以及狀態(tài)。存放的數(shù)據(jù)為響應(yīng)式,如果數(shù)據(jù)改變,那么依賴數(shù)據(jù)的組件也會(huì)發(fā)生相應(yīng)的改變。
獲取state的兩種方式例子:
1.store.getters['getRateUserInfo']
2. ...mapGetters({
UserInfo: 'login/UserInfo', // 用戶信息
menuList: 'getMenuList', // approve 運(yùn)價(jià)審批
RateUserInfo: 'getRateUserInfo' // Rate用戶信息
})
注意:可以通過mapState把全局的state和 getters 映射到當(dāng)前組件的 computed計(jì)算屬性中。
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ù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象,因此你可以調(diào)用 context.commit 提交一個(gè) mutation,或者通過 context.state 和 context.getters 來獲取 state 和 getters。
實(shí)踐中,我們會(huì)經(jīng)常用到 ES2015 的 參數(shù)解構(gòu) 來簡化代碼(特別是我們需要調(diào)用 commit 很多次的時(shí)候):
3、mutation
每個(gè) mutation 都有一個(gè)字符串的事件類型(type)和一個(gè)回調(diào)函數(shù)(handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方,并且它會(huì)接受 state 作為第一個(gè)參數(shù)。
4、getters
Vuex 允許我們在 store 中定義“getter”(可以認(rèn)為是 store 的計(jì)算屬性)。就像計(jì)算屬性一樣,getter 的返回值會(huì)根據(jù)它的依賴被緩存起來,且只有當(dāng)它的依賴值發(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請求包,vue官網(wǎng)推薦使用axios進(jìn)行http調(diào)用。
安裝:
npm install axios --save
例子:
1.發(fā)送一個(gè)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ā)送一個(gè)POST請求 axios.post('/user',{ firstName:'Fred', lastName:'Flintstone' }) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); });
以上是Vue著名的全家桶系列是什么的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。