php开发全家桶全家桶,vue全家桶有哪些

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 很多次的时候)：

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

});