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的兩種方式例子：

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); });

總結

以上是生活随笔為你收集整理的WEB前端 Vue 全家桶介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。