vue.js全家桶包有:1、【vue vuex】狀態管理;2、【vue-router】路由;3、【vue-resource】;4、axios;5、UI框架。
【相關文章推薦:vue.js】
vue.js全家桶套件有:
vue全家桶:vue vuex (狀態管理) 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)。再加上建構工具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的兩種方式範例:
第一種:
store.getters['getRateUserInfo']
第二種:
...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); });
五、搭配UI框架如:iview、vant、elementUI
iview 一套基於Vue的高品質UI 元件庫(分為小程序和pc端等不同版本);
vant 輕量、可靠的行動端Vue 元件庫,是有讚開源的一套基於Vue 2.0 的Mobile 元件庫,旨在更快、更簡單地開發基於Vue 的美觀易用的行動網站。
Ant Design Vue 是 Ant Design 的 Vue 實現,開發和服務企業級後台產品。
elementUI 是基於 Vue 2.0 桌面端中後台元件庫。
#相關免費學習推薦:JavaScript(影片)
以上是vue.js全家桶包含哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!