vue-cli知识点（包含router，vuex，axios）——学习不易，你值得拥有

区别一：在main.js当中

runtime-compiler创建的项目中的参数是：components和template

runtime-only创建的项目中的参数是：render函数

区别二：runtime-compiler创建的项目中的组件被渲染到页面的过程是: template->ast(虚拟语法树)->render->vDOM->真实DOM->页面

runtime-only创建的项目中的组件被渲染到页面的过程是:render->vDOM->真实DOM->页面

区别三：runtime-compiler：在运行时才编译template

runtime-only:将template打包时就已经编译为render函数

区别四：发布生产时，runtime-only构建的项目代码体积更小，运行速度更快

2.vue-cli3和vue-cli2区别：

vue-cli3是基于webpack4打造，vue-cli2还是webpack3

vue-cli3的设计原则是0配置，移除配置文件根目录下的build,config等目录

vue-cli3提供了vue-ui命令，土工了可视化配置，更加人性化

移除了static文件夹，新增了public文件夹，并且Index.html移动到public中

vue ui的简单使用示例：

vue ui_启动一个服务器，如下所示

安装的vue的真实版本最好看ui界面当中的依赖或者包当中的vue的dist文件（当ui界面展示的版本和package,json中不一样时）

3.前后端分离（后端只负责提供数据，不负责任何阶段的内容）

随着ajax的出现，有了前后端分离的开发模式,后端只提供api来返回数据，前端通过Ajax获取数据，并且可以通过js将数据渲染到页面中。

这样做最大的有点就是前后端责任的清晰，后端专注于数据，前端专注于交互和可视化上，并且当移动端出现后，后端不需要进行任何处理，

依然使用之前的一套api即可，目前好多的网站依然采用这种模式开发。

二.路由(Vue-Router)

为了更好的理解路由，让我们先来简单补一补计算机网络的小知识哦！！

路由就是通过互联网的网络把信息从源地址传输到目的地址的活动。忘光了不好理解？那就从生活中的路由器开始讲起吧！

路由器提供了两种机制：路由和转送（路由：是决定数据包从来源到目的地的路径转送：将输入端的数据转移到合适的输出端）

路由中有一个非常重要的概念叫路由表，路由表本质上就是一个映射表，决定了数据包的指向。

什么是路由？

根据输入的不同的url地址得到相对应的页面内容

前端路由和后端路由又是甚？

前端路由：vue-router就是一种前端路由，前端通过AJAX获取后端传过来的数据，通过js将数据渲染到页面当中，SPA（单页应用）是更新视图而不是重新发送请求，所以不会发送请求。（vue-router有两种模式，根据Mode参数来决定采用哪一种模式）

后端路由：

1.早期的网站开发整个html页面是由服务器来渲染的，服务器直接生产渲染好对应的html页面，返回给客户端进行展示

2.一个网站，这么多页面服务器如何处理呢？

一个页面有自己对应的网址，也就是url

url会发送到服务器，服务器会通过正则对该url进行匹配，并且最后交给一个controller进行处理

controll进行各种处理，最终生成html或者数据，返回给前端

这就是完成了一个io操作

3.上面的这种操作，就是后端路由

简而言之就是浏览器在地址栏输入不同的url时，每次都想后台服务器发送请求，后端将渲染好的html页面返回给前端展示。

1.路由安装和使用

路由安装：

1.安装vue-router

npm install vue-router --save(运行时依赖)

2.在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）

第一步：导入路由对象，并且调用Vue.use(VueRouter)

第二步：创建路由实例，并且传入路由映射配置

第三步：在Vue实例中挂载创建的路由实例

路由使用：

第一步：创建路由组件

第二步：配置路由映射：组件和路径映射的关系

第三步：使用路由：通过<router-link>(展示标签)和<router-view>（相当于占位）

补充1：如果想使得一点入就能够默认的显示首页内容和路径，可以按以下进行配置路由组件和路径的映射

{
    //缺省路由，相当于默认时的路径
    path:'',
    //使得路径重定向
    redirect:'/home'
  }

补充2：如果想把路劲模式改为html5的history，进行以下配置

const router=new VueRouter({
  // 配置路径和组件之间的映射关系
  routes,
  //改变其模式为history
  mode:'history'
})

2.router-link补充

在前面的router-link中，我们只是使用了一个属性:to,用于指定跳转的路径，下面我们来补充一下router-link的其它属性：

tag:可以指定<router-link>之后渲染成什么组件，比如上面的示例代码会被渲染成一个<li>元素，而不是<a>

<template>
  <div id="app">
    <router-link tag="button" to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

replace:不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中

active-class:当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

3.通过代码跳转路由

<template>
  <div id="app">
    <!-- <router-link tag="button" to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>-->
    <router-view></router-view> 
    <button @click="linkToHome">首页</button>
    <button @click="linkToAbout">关于</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    //源码中设置了this.$router
    linkToHome(){
      this.$router.push("/home")
    },
    linkToAbout(){
      this.$router.push("/about")
    }
  }
}
</script>

4.动态路由的使用

在某些情况下，一个页面的path路径可能不是确定的，除了有路径名字之外，还有用户ID，这种path和Component的匹配关系，我们称之为动态路由。

//动态路由时，映射关系的配置 
 {
    path:'/user/:userId',
    component:User
  }
<template>
 <router-link :to="'/user/'+userId">用户</router-link>
    <router-view></router-view> 
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      userId:"lisi",
    }
  }
</script>

//如果需要渲染某个传入的值时需要进行的操作
<template>
    <div>
        <h2>我是用户</h2>
        <p>我是用户内容</p>
        <h2>{{userId}}</h2>
        //也可以直接使用<h2>{{$route.params.abc}}</h2>
    </div>
</template>
<script>
export default {
    name:"User",
    computed:{
        userId(){
            //$route指的是当前的活跃的路由，哪个活跃就是哪个
            return this.$route.params.abc
        }
    }
}
</script>
//路由映射的配置
  {
    path:'/user/:abc',
    component:User
  }

5.路由的懒加载

方式1:AMD方法

const About=resolve=>(['../components/About.vue'],resolve);

方法2：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和webpack的代码分割

const Home=()=>import("../components/Home")


import VueRouter from 'vue-router'
import Vue from 'vue'

const Home=()=>import("../components/Home")
const About=()=>import("../components/About")
const User=()=>import("../components/User")

Vue.use(VueRouter)

const routes=[
  {
    path:'',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home
  },
  {
    path:'/about',
    component:About
  },
  {
    path:'/user/:abc',
    component:User
  }
]

const router=new VueRouter({
  routes,
  mode:'history',
  linkActiveClass:'active'
})
export default router

6.路由的传参

传递参数主要有两种类型：params和query

params传参

配置路由格式：/router/:id
传递的方式：z在path后面跟上对应的值
传递后形成的路径：/router/123,/router/abc

//第一步
<template>
    <div>
        <h2>我是用户</h2>
        <p>我是用户内容</p>
        <h2>{{$route.params.id}}</h2>
    </div>
</template>
<script>
export default {
    name:"User",
    computed:{
        userId(){
            //$route指的是当前的活跃的路由，哪个活跃就是哪个
            return this.$route.params.id
        }
    }
}
</script>
//第二步
  {
    path:'/user/:id',
    component:User
  }
//第三步
<router-link :to="'/user/'+userId">用户</router-link>
export default {
  name: 'App',
  data(){
    return {
      userId:"lisi"
    }
  }
}

query传参

配置路由格式：/router,也就是普通配置
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/router?id=123，/router?id=abc

//示例写法
<router-link :to="{path:'/profile',query:{name:'why',age:18,height:20}}">档案</router-link>

7.vue-router-keep-alive以及其它问题

router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存

8.tabbar实现思路

1.如果在下方有一个单独的tabbar组件，你将如何封装

自定义tabbar组件，在app中使用
让tabbar处于底部，并且设置相关的样式

2.tabbar中显示的内容由外界决定

定义插槽
flex布局平分TabBar

3.自定义tabbarItem,可以传入图片和文字

定义TarBarItem,并且定义两个插槽：图片和文字
给两个插槽外层包装div,用于设置样式
填充插槽，实现底部TabBar的效果

补充:动态修改tabbar路径

//动态修改文件路径步骤
//1.取别名，webpack.base.config.js中
    resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      //下面的别名的意思是@表示的是自动去寻找src路径
      '@': resolve('src'),
      'assets':resolve('src/assets'),
      'components':resolve('src/components'),
      'views':resolve('src/views'),
    }
  }
//2.如下修改导航项目的组件
 <tab-bar-item path="/home" activeColor="blue">

        <img slot="item-icon" src="~assets/img/tabbar/Home1.png" alt="">

        <img slot="item-icon-active" src="~assets/img/tabbar/Home.png" alt="">

        <div slot="item-text">首页</div>

  </tab-bar-item>
//3.修改引入组件的路径
<script>
import TabBar from "components/tabbar/TabBar"
import TabBarItem from "components/tabbar/TabBarItem"
</script>

三.Vuex

1.简单介绍Vuex

Vuex是干啥的？

官方解释：Vuex是一个专门为Vue.js应用程序开发的状态管理模式
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
Vuex也继承到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试，状态快照导入导出等高级调试功能。
注意：Vuex提供了一个在多个组件间共享状态的插件（也可以自己封装一个对象使得它里面的属性做到响应式，但是会比较麻烦）

管理什么状态？（以下示例）

用户的登录，用户名称，头像，地理位置信息
商品的收藏，购物车中的物品

2.界面的状态管理

1.单界面的状态管理

在单个组件中进行状态管理是一件非常简单的事情

state（状态）能够在view（视图）上显示，view上能产生一些actions(行为,比如点击等），行为反过来又能修改state

示例一

APP.vue

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{counter}}</h2>
    <button @click="counter++">+</button>
    <button @click="counter--">-</button>
    <HelloVuex :counter="counter"/>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'
export default {
  name: 'App',
  components:{
    HelloVuex
  },
  data (){
    return {
      message: '我是APP组件',
      counter:0
    }
  }
}
</script>

hellovuex.vue

<template>
    <div>
        <h2>{{counter}}</h2>
    </div>
</template>
<script>
export default {
    name:'HelloVuex',
    props:{
        counter:Number
    }
}
</script>

示例二：使用store之后

app.vue

<template>
  <div id="app">
    <h2>{{$store.state.counter}}</h2>
    <button @click="$store.state.counter++">+</button>
    <button @click="$store.state.counter--">-</button>
    <HelloVuex/>
  </div>
</template>
<script>
import HelloVuex from './components/HelloVuex'
export default {
  name: 'App',
  components:{
    HelloVuex
  }
}
</script>

store下的index.js

import Vue from 'vue'
import Vuex  from 'vuex'

Vue.use(Vuex)

const store=new Vuex.Store({
    //state对应一个对象
    state:{
        counter:10
    }
})
export default store

hellovuex.vue

<template>
    <div>
        <h2>{{$store.state.counter}}</h2>
    </div>
</template>
<script>
export default {
    name:'HelloVuex',
}
</script>

2. 多界面的状态管理

当多个视图都依赖于同一个状态,这时候就需要一个大管家来统一帮助我们管理这个状态,Vuex就是位我们提供这个大管家的工具

全局单例模式(大管家)

将共享的状态抽离出来，交给大管家，统一进行管理，之后的每个视图，都要按照规定好的规定，进行访问和修改等操作

注意：如果某个组件可以直接修改state，当出了错误的时候，我们不能够精确的了解是哪个组件进行了修改，所以我们需要devtools工具。

除此之外，只要我们修改state状态，那一定要经过Mutations，否则devtools不能给我们的组件什么的操作进行记录， Mutations里面做的是同步操作，异步操作在actions中进行然后commit到mutations中（所以actions操作可有可无）

3.多页面状态管理案例(vuex-devtools和mutations)

index.js

import Vue from 'vue'
import Vuex  from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
    state:{
        counter:10
    },
    mutations:{
        //方法并且方法中默认有一个state
        increment(state){
            state.counter++
        },
        decrement(state){
            state.counter--
        }
    }
})
export default store

app.vue

<template>
  <div id="app">
    <h2>{{$store.state.counter}}</h2>
    <button @click="addtion">+</button>
    <button @click="subtion">-</button>
    <HelloVuex/>
  </div>
</template>
<script>
import HelloVuex from './components/HelloVuex'
export default {
  name: 'App',
  components:{
    HelloVuex
  },
  data (){
    return {
      message: '我是APP组件',
    }
  },
  methods:{
    addtion(){
      this.$store.commit("increment")
    },
    subtion(){
      this.$store.commit('decrement')
    }
  }
}
</script>

3.Vuex核心概念

1.State：保存共享状态信息

单一状态树或单一数据源
只创建一个store对象，使用单一状态树来管理应用层级的全部状态
单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护

如果信息状态保存到多个Store对象中，那么管理和维护都变得非常困难

2.Getters

getters相当于一个计算属性，功能是将state里面的内容进行处理之后传递，Getters作为参数和传递参数

注意；getters默认是不能传递参数的，如果希望传递参数，那么只能让getters本身返回另外一个函数（下面moreagestu是一个示例）。

app.vue

    <h2>-----app内容：getters相关信息-----</h2>
    //使得输出数字得平方
    <p>{{$store.getters.powerCount}}</p>
    //输出年纪大于20得学生信息
    <p>{{$store.getters.more20stu}}</p>
    //输出年纪大于20得学生得个数
    <p>{{$store.getters.more20stulen}}</p>
    //根据传入的age值来获取学生信息
    <p>{{$store.getters.moreAgeStu(20)}}</p>

index.js

    getters:{
        powerCount(state){
            return state.counter*state.counter;
        },
         more20stu(state){
            return state.students.filter(s=>s.age>20)
       },
       //该传入的geeters方便我们拿其它的东西
       more20stulen(state,getters){
           return getters.more20stu.length
       },
       moreAgeStu(state){
           return function(age){
             return state.students.filter(s=>s.age>age)
           }
       }
}

3.Mutation

Vuex的store状态更新的唯一方式： 提交Mutation
Mutation包括两部分

1,字符串的事件类型(type)

2.一个回调函数(handler)，该回调函数的第一个参数就是state

mutation的传递参数

在通过mutation更新数据时，有可能我们需要携带一些额外的参数——被称为是载荷

传递一个参数或者多个参数的情况（多个参数以对象形式传递）

app.vue

   template中使用 ：   
   <button @click="addcounter(5)">+5</button>
    <button @click="addcounter(10)">+10</button>   
    <button @click="addstu">添加学生</button>

    methods中使用：
    addcounter(counter){
      this.$store.commit('increcounter',counter)
    }，
    addstu(){
      const stu={id:114,name:'allen',age:35}
      this.$store.commit('addstudent',stu)
    }

index.js

    mutations:{
        increcounter(state,counter){
            state.counter+=counter
        }，
        addstudent(state,stu){
            state.students.push(stu)
        }
    }

mutation提交风格

1.普通的提交封装
上面的通过commit提交的是普通风格


  addcounter(counter){
       this.$store.commit('increcounter',counter)
    }

    mutations:{
     increcounter(state,counter){
          state.counter+=counter
      }
}

2.特殊的提交封装

 addcounter(counter){      
     //第二种风格，使用type,此时传入的是一个对象（属性counter为传入的参数，属性age为18）
      this.$store.commit({
      type:"increcounter",
      counter,
      age:18
     }



    mutations:{
      increcounter(state,payload){
           state.counter+=playload.counter
      }
}

数据的响应式原理

  info:{
            name:"letimer",
            age:30,
            height:1.7
        }

Vuex的store中的state是响应式的，当state中的数据发生变化时，Vue组件会自动更新

(这些属性会加入响应式系统中，响应式系统会监听属性的变化，当属性发生变化时，会通知所有界面中用到该属性的地方，让界面发生刷新)

让属性加入响应式系统必须遵守一些Vuex对应的规则

1.提前在store中初始化好所需的属性
2.当给state中的对象添加新属性时，用以下两种方式可以实现将属性加入到响应式系统

  Vue.set(state.info,'address','北京')
  Vue.delete(state.info, 'age')

mutations的类型常量

1.新建Mutation-type.js存放常量

export const INCREMENT = "increment"

2.index.js中导入和定义方法相应改变

import {INCREMENT} from './mutations-types'

  mutations: {
    // 定义方法
    [INCREMENT](state) {
      state.counter++
    }
   }

3.app.vue中导入加使用

import {INCREMENT} from './store/mutations-types'

    addtion(){
      this.$store.commit(INCREMENT)
    }

4.Actions

引入：通常情况下，Vuex要求我们mutations中的方法必须是同步方法?

主要的原因是当我们使用devtools时，可以devtools帮助我们捕捉mutation的快照，但是如果时异步操作，那么devtools将不能很好的追踪这个操作什么时候会被完成.

所以，如果需要进行异步操作，一定要在actions中进行

第一种写法：

//其实就是app.vue commit-> index.js mutation
//变成app.vue dispatch->index.js action commit->index.js mutation

//1.app.vue
  updateinfo(){
      // this.$store.commit("updateinfos")
      // this.$store.dispatch('aupdateinfos')
      this.$store.dispatch('aupdateinfos',{
        message:"我是携带的信息",
        success:()=>{
            console.log('执行完了');
        }
      })
    }

//2.index.js action
 actions:{
        //context上下文
        // aupdateinfos(context){
        // setTimeout(()=>{
        //   context.commit('updateinfos')
        // },1000)
        //  }

       aupdateinfos(context,payload){
       this.$store.dispatch('aupdateinfos',{
        message:"我是携带的信息",
        success:()=>{
            console.log('执行完了');
        }
      })
}

//3.index.js mutation
 updateinfos(state){
            state.info.name="coderwhy"
        }

第二种写法：action本身可以返回一个Promise,App.vue 中可以通过dispatch拿到Promise，.then继续使用Promise

app.vue
methods:{
updateinfo(){
      this.$store
      .dispatch('aupdateinfos',"我是传递的信息")
      .then(res=>{
        console.log(res);
      })
    }
  }


index.js
actions:{
  aupdateinfos(context,payload) {
            return new Promise((resolve,reject) => {
              setTimeout(() => {
                context.commit('updateinfos'),
                console.log(payload);
              },1000)
            })
          }
        }

5.Module

Module是模块：

1. Vue使用单一状态树，就意味着很多状态都交给Vuex来管理

2. 当应用变得复杂时，store对象就有可能变得相当臃肿

3. 为解决这个问题，可以在modules中定义多个模块，每个模块都有一个state、getters、mutations、actions

  modules: {
    // 可以在modules中定义多个模块，每个模块都有一个state
    a: moduleA
  }

index.js

const moduleA={
    state:{
        name:"modulea"
    },
    mutations:{
       //同步
        mupdatename(state,payload){
            state.name=payload
        }
    },
    actions:{
       //异步
        aupdatenames(context){
            setTimeout(()=>{
                context.commit('mupdatename','wagwu')
            })
        }
    },
    getters:{
        fullname1(state){
            return state.name+"111"
        },
        fullname2(state,getters){
            return getters.fullname1+"222"
        },
        //rootState指的是store中的state
        fullname3(state,getters,rootState){
            return getters.fullname2+rootState.counter

        }
    }

app.vue

 <h2>-----app内容:modules相关内容-----</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="upatename">修改名字</button>
    <h2>{{$store.getters.fullname1}}</h2>
    <h2>{{$store.getters.fullname2}}</h2>
    <h2>{{$store.getters.fullname3}}</h2>
   <button @click="asyncupdatename">异步修改名字</button>


   upatename(){
      this.$store.commit("mupdatename","lisi")
    },
    asyncupdatename(){
      this.$store.dispatch('aupdatenames')
    }

6.vuex-store文件夹的目录结构

index.js抽离模块之后的代码，结构清晰，不臃肿

import Vue from 'vue'
import Vuex  from 'vuex'
import mutations from "./mutation"
import actions from "./actions"
import getters from "./getters"
import moduleA from "./modules/moduleA"

//1.安装插件
Vue.use(Vuex)

//2.创建一个对象
const state={
    counter:10,
    students:[
        {id:1,name:'张三',age:18},
        {id:2,name:'李四',age:19},
        {id:3,name:'王五',age:20},
        {id:4,name:'小六',age:21}
    ],
    info:{
        name:"letimer",
        age:30
    }
}
const store=new Vuex.Store({
    //state对应一个对象
    state,
    modules:{
        a:moduleA
    },
    mutations,
    actions,
    getters
})
//3.导入store
export default store

四.网络请求封装（axios）

发送网络请求的方式

选择一

传统的Ajax是基于XMLHttpRequest(XHR)

缺点：
1.配置和调用方式等非常混乱
2.编码看起来混乱
3.真实开发中很少使用，而是使用jQuery-Ajax

选择二

jQuery-Ajax

缺点：
1.在Vue的整个开发中都不需要jQuery了
2.意味着为了方便我们进行一个网络请求，特意引用一个jQuery，不合理
3.完全没有必要为了用网络请求就引用这个重量级的框架

选择三

官方在Vue1.x时，推出Vue-resource

Vue-resource的体积比jQuery小很多
缺点：

Vue2.0推出后，vue-resource不再更新和维护，对以后的项目开发和维护都存在很大隐患

选择四

axios

优点：
1.在浏览器中发送XMLHttpRequests请求
2.在node.js中发送http请求
3.支持Promise API
4.拦截请求和响应
5.转换请求和响应数据

axios框架的基本使用

axios({
  url:"http://123.207.32.32:8000/home/multidata",
  //专门对get请求进行拼接
  params:{
    type:"pop",
    page:1
  }
}).then(res=>{
  console.log(res);
})

发送并发请求

有时候，我们可能需求同时发送两个请求

使用axios.all,可以放入多个请求数组
axios.all([])返回的结果是一个数组，使用axios.spread可以将数组[res1,rea2]展开为res1,res2

axios发送并发请求
axios.all([axios({
  url:"http://123.207.32.32:8000/home/multidata"
}),axios({
  url:"http://123.207.32.32:8000/home/data",
  params:{
    type:'sell',
    page:4
  }
})])
//下面这种方法输出的是数组array[2]
//.then((results)=>{
//console.log(results))
//}

//下面的方法输出的是object
.then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
}))

axios的实例和模块封装

main.js

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})
// 封装request模块
import { request } from './network/request';

request({
  url: '/home/multidata'
})
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  })

//config表示配置信息
    export function request(config) {
      return new Promise((resolve, reject) => {
        //1.创建实例
        const instance = axios.create({
          baseURL: 'http://123.207.32.32:8000',
          timeout: 3000
        })
        
        //2.发送真正的网络请求
        return instance(config)
      })
    }

axios拦截器的使用

axios的拦截器，用于我们在发送每次请求或者得到响应后，进行相应的处理

请求拦截的作用
1.config中的一些信息不符合服务器的要求
2.每次发送网络请求时，都在界面上显示一个图标
3.某些网络请求（登录(token)），必须携带一些特殊信息

import axios from 'axios'
//config表示配置信息
    export function request(config) {
      return new Promise((resolve, reject) => {
        //1.创建实例
        const instance = axios.create({
          baseURL: 'http://123.207.32.32:8000',
          timeout: 3000
        })

        //2.axios拦截器
        //请求拦截
        instance.interceptors.request.use(config => {
             console.log(config);
            //拦截之后需要将config返回，不然拿不到这个config,然后err就会报错
            return config;
          }, err => {
             console.log(err);
          });

           //响应拦截
          instance.interceptors.response.use(res => {
            console.log(res.data);
            //也需要返回，但是只需要data部分即可
            // return res.data
          }, err => {
            console.log(err);
          })
        instance.interceptors.response;

        //3.发送真正的网络请求
        return instance(config)
      })
    }

axios的配置信息相关

axios配置信息
配置信息	示例
请求地址	url: ‘/user’
请求类型	method: ‘get’
请求根路径	baseURL = ‘http://123.207.32.32:8000’
请求前的数据处理	transformRequest: [function(data){}]
请求后的数据处理	transformResponse: [function(data){}]
自定义的请求头	headers: [‘x-Requested-Width’:‘XMLHttpRequest’]
URL查询对象	params:{id:12}
查询对象序列化函数	paramsSerializer: function(params){}
request body	data: {key: ‘aa’}
超时设置s	timeout: 1000
跨域是否带Token	withCredentials: false
自定义处理请求	adapter: function(resolve,rreject,config){}
身份验证信息	auth: {uname:’’,pwd: ‘12’}
响应的数据格式	json/blob/document/arraybuffer/text/stream responseType: ‘json’