vue.js全家桶是完整的vue專案的核心構成,包括vue-router、vuex、vue-resource、vue-cli和sass樣式。vue-cli是快速構建單頁應用的腳手架。
vue全家桶:
包含了vue-router,vuex,vue-resource,再加上構建工具vue-cli,sass樣式,這些是一個完整的vue專案的核心構成。
(學習視訊分享:)
概括起來就是:
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全家桶是什麼的詳細內容,更多請關注TW511.COM其它相關文章!