首頁  >  文章  >  web前端  >  vue.js全家桶包含哪些

vue.js全家桶包含哪些

coldplay.xixi
coldplay.xixi原創
2020-11-10 11:57:4215351瀏覽

vue.js全家桶包有:1、【vue vuex】狀態管理;2、【vue-router】路由;3、【vue-resource】;4、axios;5、UI框架。

vue.js全家桶包含哪些

【相關文章推薦: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn