Vue 全家桶介绍

Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vu...）。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。

归纳起来就是：、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。

下面单独介绍

前言：Vue两大核心思想：组件化和数据驱动。组件化：把总体拆分为各个能够复用的个体，数据驱动：经过数据变化直接影响bom展现，避免dom操做。

1、Vue-cli是快速构建这个单页应用的脚手架,

全局安装 vue-cli

$ npm install --global vue-cli

建立一个基于 webpack 模板的新项目

$ vue init webpack my-project

安装依赖，走你

$ cd my-project
$ npm install
$ npm run dev

2、vue-router

安装：npm installvue-router

若是在一个模块化工程中使用它，必需要经过 Vue.use() 明确地安装路由功能：

import
Vue
from'vue'
import
VueRouter
from'vue-router'
Vue.use(VueRouter)
另外注意在使用中，能够利用vue的过渡属性来渲染出切换页面的效果。

3、vuex

vuex为专门为vue.js应用程序开发的状态管理能够理解为全局的数据管理。vuex主要由五部分组成：state action、mutation、getters、mudle组成。

使用流程是： 组件中能够直接调用上面四个部分除了mudle，

一、state

相似vue 对象的data, 用来存放数据以及状态。存放的数据为响应式，若是数据改变，那么依赖数据的组件也会发生相应的改变。

获取state的两种方式例子：

1.store.getters['getRateUserInfo']

1. ...mapGetters({

   UserInfo: 'login/UserInfo', // 用户信息
    menuList: 'getMenuList', // approve 运价审批
    RateUserInfo: 'getRateUserInfo' // Rate用户信息

   })

注意：
能够经过
mapState
把全局的
state
和
getters
映射到当前组件的
computed
计算属性中。
二、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')

}
}

三、mutation

每一个 mutation 都有一个字符串的 事件类型(type) 和一个 回调函数(handler)。这个回调函数就是咱们实际进行状态更改的地方，而且它会接受 state 做为第一个参数。

四、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 映射到局部计算属性：

4、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);
});
具体参考：https://www.jianshu.com/p/df4...