2019-03-25

                            vue   全家桶

    Vue有著名的全家桶系列，包含了：

    vue-router，vuex，vue-resourc。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。

概括起来就是：、

        1.项目构建工具

        2.路由、

        3.状态管理、

        4.http请求工具。

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

# 全局安装 vue-cli

    npm install --global vue-cli（国际版）

    cnpm install --global vue-cli(国内版)

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

    vue init webpack my-project（构建项目）

    安装依赖，

   cd my-project（cd 到项目）

   npm install    （下载依赖）

     cnpm instal

     pm 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主要分五部分组成：1，state ,2，action,3，mutation,4，getters,5，mudle组成。

    下载方式：npm install vuex --save

    vuex使用上组件中可以直接调用上面四个mudle除外，

1、state

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

获取state简单的例子：

1.store.getters['getRateUserInfo']

注意：可以通过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。

四、axios

axios是一个http请求包，vue官网推荐使用axios进行http调用。

安装：npm install axios --save

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

});