Es6

1. let 是变量

2.const 1. 是常量不能修改

1. 创建的时候一定要赋值 要不报错
2. 定义的类 里面的属性值可以修改

3.对象创建

1.可以先定义const name=1；

Const a={name};

输出a的话就是{“name”:1};

1. 可以直接放进去函数

Const a={

Run(){

},

Set(){

}

}

 

4. 遍历 遍历1  for(let i;i<data.length;i++)

遍历2  for(let i in data) //i 直接为data数据的下标

遍历3  for(let one of data) //one 直接为data相应的数据

5. 函数 ...nub   //es6接收参数新特性

function A(...a){

        console.log(a);

     }

1. filter函数 //筛选函数 如果函数return true 那么将返回这个值

let e=n.filter(function(a) {

                if(a>30)

                return true;

            });

1. Map函数  //统一操作
2. Reduce(function(preValue,n),最开始的preValue值);

一、Vue基础知识

<li v-for="item in movies">{{item}}</li>  movies:["asdsad","asdasds","asdasdsa"]

1. v-once 阻止响应式
2. v-html=”数据” 就可以智能实现将代码显示
3. v-text=”数据” 直接将数据显示出来
4. V-pre         将这个标签内的内容按html显示出来
5. v-cloak        标签斗篷，等vue函数真正管理这个组件的时候 因为有的时候电脑卡vue组件加载慢 等加载完以后这标签就自动去除了 配合css使用使用[v-cloak]{display:none}
6. v-bind:src=”data” 简写:src=”data”     动态绑定a img 标签的src属性  绑定解析data数据
7. 
8. 
9. v-for=”(item,index) in data”  {{item}}   //第一个数据 第二个下标 遍历data数组来将标签增加 并且通过{{item}} 来是内容显示到相应的标签上

 

 

1. :style=”{fontsize:’20px’}”  //动态绑定css属性类 如果20px不加引号那么将认为他是变量 去data中寻找 如果找不到将会报错

1. :style=”[data1,data2]” //动态绑定css属性数组 data1:{font-size:”20px”}加引号
2. 计算属性 调用的时候是{{zz}}不用加()  //计算属性一般没有set方法 只读属性 get方法

 

13.v-on: 语法糖简写为 @click

<p @click="add">+</p>

函数传参

如果函数需要有参数

1. 如果设置了小括号

1. 有参数 那么参数为这个
2. 如果没参数那么就是undifinde

2. 如果没设置小括号

1.那么参数就是事件event

<p @click="add">+</p> //没加括号

<p @click="add()">+</p> //加括号

1. 函数获取event事件

给函数实参加上$event 接收以后就是这个事件

1. 函数冒泡事件

.stopt //停止冒泡

.prevent //阻止默认行为

@submit.prevent //阻止默认行为，没有表达式

@click.stop.prevent //串联修饰符

@keyup.enter=”onEnter” //键修饰符，键别名

@keyup.13=”onEnter” //键代码，键别名

.click.once //回调只会触发一次

 

1. v-if  <p v-if="false">aaa{{count}}</p>   //如果为false那么不渲染上页面.

v-else-if

V-else

 

16.

代码复用 如果不加key的话那么复用的代码会重复显示 key值不一样的话就会避免这种情况 key值一样的话就会复用

1. 

 

 

给lable标签加上for=“id” 以后点击lebel焦点自动定位到id为id的input上

1. v-show=“true” //决定是否显示在页面上 与v-if不同的是这个是加了dispaly：none 属性 v-if 不显示的话 就是代码注释了

 

 

1. V-for   //遍历数组 v-for=”(item,index) in data” item是遍历的数据 index是遍历数据的下标

<li v-for=”(item,index) in data”>{{index}}  {{item}}</li>

!!!遍历数组  第一个永远是value 第二个永远是index值

!!!遍历json  第一个永远是value 第二个永远是K值 第三个永远是index值

1. v-model   //

1.数据双向绑定input标签

 

2.v-model与radio结合

1-如果几个input按钮 绑定的都是同一个v-model那么 name=” ”这个参数就 可以省略

2-<input  type=”radio” value=”女” v-model=”sex”>

如果选中这个那么双向绑定的sex值就会是这个input的value

3.v-model与checkbox结合

1-如果被选中那么v-model就是true 相反则为false

并且可以设置小列子比如点击某个按钮以后才可以继续

 

2.如果panduan为这种形式 那么v-model的 值为true 或者false

 

  如果panduan为这种形式，那么v-model的值为 这个复选框的value panduan的值将为一个数组

 

4.v-model与select结合跟v-model与radio结合一样

select如果加上属性multiple 就可以将下拉框里面的东西复选了 复选时得按ctrl键

 

5. v-model修饰符 v-model.lazy  //当input标签失去焦点的时候才会改变这个 v-model值

6. v-model 修饰符 v-model.number //因为v-model将得到的值自动转换为string 所以加一个修饰符的话就可以将这个字符串转化为number类型

7.v-model 修饰符 v-model.trim //可以去除字符串首尾的空格

1. event.target.value; //目标事件中的value值

• Vue组件开发

1. 创建组件构造器 //子模板中最外层必须被div标签包裹要不报错

const cpnc=Vue.extend({

        template:`

            <div>

                <p>wojinlaila</p>

            </div>

            `

    })

1. 注册组件（全剧组件）

Vue.component("cpn",cpnc);

1. 注册组件（局部组件） //在components属性中注册

const app=new Vue({

        el:"#aaa",

        components:{

            cpn:cpnc

        }

    })

1. 父子组件 //在组件里面写components属性

const cpnc=Vue.extend({

        template:`

            <div>

                <p>wojinlaila</p>

            </div>

            `,

        components:{

            aa22:cpnc1

        }

    })

1. 应用组件
   1. 必须在Vue管理的组件下使用
2. 语法糖   //可以不用组件构造器 而直接用里面的数据来调用（本身就自 己运行了extend Vue组件构造器）

Vue.component("cpn",{

        template:`

            <div>

                <p>wojinlaila</p>

            </div>

            `,

        components:{

            aa22:cpnc1

        }

});

(2)

const app=new Vue({

        el:"#aaa",

        components:{

            cpn:{

        template:`

            <div>

                <p>wojinlaila</p>

            </div>

            `,

        components:{

            aa22:cpnc1

         }

}

      }

   })

1. 组件模板放在 <script type="text/x-template" id="muban">里
   1. 格式

<script type="text/x-template" id="muban">

        <div>

            <p>321321</p>

        </div>

</script>

1. 1. 用法

components:{

            cpn:{

                template:"#muban"//直接把script 模板标签”#id”仍在这就 行

            }

        }

1. 组件放在 <template id="muban">里//跟上面那种一样
2. 组件模板常量
   1. 不能通过Vue中的data数据中获得
   2. 获取变量得是这样 在组件构造中应用data(){return {data:data}}函数

{

                template:"#muban",

                data(){

                    return {

                        title:"woshibiaoti"

                    }

                }

            }

 

1. 1. 创建一个公共变量则需要在外面定义一个obj data函数返回的时候返回 return这个obj就可以
2. 组件模板方法
   1. 跟组件中的方法定义一样 只是定义在了模板组件构造器中

1. 父子模块的信息传输 //用驼峰标识的话可能会报错
   1. 父传子方式一//数组
      • 给儿子定义一个props属性 props:["title"]
      • 调用的时候直接在模板标签里面<asd :title="title"></asd> 这样绑定
        1. 第一个title是子模块的props中的数据
        2. 第二个title是父模块中的数据
      • 模块中使用的时候直接跟Vue实例中使用变量的方法是一样的
   2. 父传子方式二//json
      • 
      • 调用方式跟数组一样
      • Default属性//默认值
      • required属性//必传项

       

   3. 数据类型是对象或者数组的时候，默认值必须是一个函数 //因为有的 会报错

 

1. 子传父

 

1. 1. 子：在方法函数里面设置this.$emit("自定义事件",data);

 

1. 1. 父：在创建子模板标签里加上监听 //函数不用加括号 即使传参了也不加

 

1. 1. 父亲的方法里面得有参数

 

1. 父子互传

 

1. 父访问子
   1. this.$children //添加在父亲方法里面的得到子模板的所有属性
   2. this.$refs     //给子模板标签添加ref=”自定义” 属性 父亲通过方法调用 this.$refs就可以得到这个子模板的属性
2. 子访问父
   1. this.$parent //在子方法里面得到父模板的所有属性
   2. this.$root //在子方法里面得到父模板的所有属性

1. 插槽使用
   1. 子模板中定义<slot>默认值</slot>这个语句
   2. 使用子模板标签时 在内部定义的内容都会传到子模板的slot中
   3. 如果调用时内部没有定义东西那么子模板中的slot标签中的东西就会变成默 认值
2. 插槽具名使用
   1. <slot name="slot1">默认值</slot> //给子模板中的slot标签加上name 属性
   2. 调用子模板标签时里面的内容<button type="" slot="slot1">奥术大师</button>
   3. 如果调用调用子模板属性中的东西时 属性里面没有slot属性 或者属性不一样那么就不会套进插槽里面

 

1. 作用域插槽
   1. 在子模板中建立slot标签
   2. 在父亲的中调用子模板的标签中写入template标签 并加上属性 slot-scope="slot"
   3. 调用的话直接在{{slot.data}} 这样调用

    

 

• 模块化

1. Js原生模块打包
   1. <script  src="asd.js" type="module"></script>
   2. 导出 //export
      • 
      • 
      • 在导出前定义好 然后直接通过json形式全部导出
      • 如果这样导出  那么用户将自定义 接收

       

       

export default {}   //导出

import app from "./vue/app"; //接收

• 1. 导入        //import
     • 
     • 

      

      

• Webpack  //!!!如果报错几乎都是版本 问题
  1. 安装 Vue2对应webpack3 //版本问题

 

npm install webpack@3.6.0 --save-dev

1. 1. 使用
      1. 通过js
      2. Js模块互相引包 如果直接用那个js文件的话 那么htm页面将不认识这个引包

必须通过webpack函数使用

创建两个文件夹 src dist 分别为源js文件夹 webpack生成的文件夹

命令：webpack ./src/asd.js ./dist/bundle11.js

1. 1. 1. 如果不想敲那么多命令行
         • 可以在终端的当前目录下建立 webpack.config.js文件
         • 配置文件中的代码

const path=require('path');

module.exports={

    entry:"./src/asd.js",

    output:{

        path:path.resolve(__dirname,"dist"),

        filename:"wangzhaoyang.js"

    }

}

• • • • 运行代码 直接命令行敲 webpack
    • packjson.json启动 可以用本地的webapck防止与总版本兼容
      • npm init //初始化一个 package.json的文件
      • 然后咱下图中的数据修改
      • 好处就是如果webpack版本不兼容的话可以定义内部的webpack来使用
      • npm run build  //执行命令行

 

1. 1. webpack loader模块  //一定注意版本问题
      1. 安装npm依赖

npm install style-loader@0.23.1 --save-dev

1. 1. 1. 安装loader中合适的loader
         • npm install --save-dev css-loader@0.28.0 //安装css模块依赖
         • npm install less@3.9.0 --save-dev    //安装less模块依赖

npm install less-loader@5.0.0 --save-dev //安装less-loader依赖  两个都得装下

• • • • npm install --save-dev url-loader@1.1.2 //安装url依赖

针对背景图关于css样式里面的url属性

• • • • npm install --save-dev babel-loader@7 babel-core babel-preset-es2015     //安装将es6转化为es5的依赖
        1. 配置一下得

{

        test: /\.js$/,

        //exclude 排除因为不想将下面的文件转换为es5

        //include 包括

        exclude: /(node_modules|bower_components)/,

        use: {

          loader: 'babel-loader',

          options: {

            presets: ['es2015']  //这里做一个修改

          }

        }

      }

• • • • npm install vue@2.5.21 --save //安装Vue依赖
        1. 因为装的版本是简略版run所以直接运行的话会报错得修改下面是两种修改方式
        2. 方法一：在webpack.config.js文件里面加上这一条属性 原理就是improt Vue from “vue”的时候 他不去找默认的vue文件 而去找咱们那个完整版的文件

resolve: {

      alias: {

        'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'

      }

    },

1. 1. 1. 1. 1. 方法二：在引用Vue的时候直接

import Vue from 'vue/dist/vue.js'引用

不再是 import Vue from 'vue'这样引用

⑥npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev //安装关于.vue文件的脚手架

!!!!!!!!!!vue-loader的版本要是不对的话会产生提示这样的插件plugin错误

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

vue-template-compiler 版本号 必须！！和vue的版本统一

1. 安装完以后配置webpack.config.js文件

{

        test: /\.vue$/,

        use: [

          {

            loader: 'vue-loader',

          }

        ]

      },

1. 使用vscode用户可以下载Vetur插件来快速创建vue模板

<template>

   //在这里放置模板

</template>

<script>
//引用js语句的话一定要在script中使用

export default {

name:””

//这里放置除了template 的其余属性data啦啥的

}

</script>

<style>   //这里放置需要设置的css样式代码

</style>

1. 1. 1. 1. 1. js文件引用vue文件

import app from "./vue/app1.vue";

1. 1. 1. 1. 1. vue文件也可以对vue文件进行引用
            2. 如果想引用的时候省略.vue

 import app from "./vue/app1";

需要配置webpack.config.js文件里的extensions属性

resolve: {

      extensions:['.js','.css','.vue'],//可以让你省去写.js .css .vue 文件名

      alias: {

        'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'  别名 可以让你正确的寻找文件

      }

    },

1. 1. 1. 配置package.json中的文件 //安装的时候npm 加上--save-dev 这个语句的话人家就默认配置

"devDependencies": {

    "all": "^0.0.0",

    "css-loader": "^0.28.0",

    "style-loader": "^0.23.1",

    "webpack": "^3.6.0"

  }

1. 1. 1. 配置webpack.config.js文件
         • 下面中的有个坑 use属性 里面的东西执行顺序是从右向左执行

 

module: {

      rules: [

        {

          test: /\.css$/,

          use: [ 'style-loader', 'css-loader' ]

        }

      ]

    }

1. 1. 1. 在要打包的js文件里面调用css

require("./css/aaa.css");

1. 1. 1. 开始启动

1. 1. 添加版权的Plugin

⑦npm install --save-dev html-webpack-plugin@3.2.0//安装将html转化到dist目录下

1. 需要配置webpack.config.js文件

const HtmlWebpackPlugin=require("html-webpack-plugin");

//然后给module.exports 里面配置属性

plugins:[

      new webpack.BannerPlugin("最终版权归王朝阳所有"),

      new HtmlWebpackPlugin({})

    ],

打包的文件的html文件默认是引用了这个打包后js文件的那个html

也可以自己配置 里面的属性 template那个属性就是要打包的文件

new HtmlWebpackPlugin({

        template:"a.html"

      })

 

1. 1. js压缩的Plugin

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

将自动把要压缩的js文件压缩

 

1. 1. 搭建本地服务器   //vscode 中有一个live sever插件挺好使

npm install --save-dev webpack-dev-server@2.9.1

 

webpack.config.js文件里面配置

• 运行服务器方法一

直接在命令行中敲出

node_modules\.bin\webpack-dev-server

• 再package.json文件夹中 script属性下 设置

"scripts": {

    "dev":"webpack-dev-server --open"

  },

其中 --open 的意思是运行服务器的时候直接打开

1. 1. 配置文件的分离

npm install webpack-merge@4.1.5 --save-dev

建立一个build文件夹 里面放置三个文件

 

  base.config.js   //公共配置文件

dev.config.js    //测试文件

      prod.config.js   //生产文件

测试文件里面的代码格式为

const uglifyJsPlugin=require("uglifyjs-webpack-plugin");

const webpackMerge=require("webpack-merge");

const baseConfig=require('./base.config')

module.exports=webpackMerge(baseConfig,{plugins:[

    new uglifyJsPlugin(),

  ]})

    

使用：在原先的package.json 文件里面自己设置的build dev属性修改

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack --config ./build/prod.config.js",

    "dev": "webpack-dev-server --open --config ./build/dev.config.js"

  },

 在公共的webpack.config.js文件中（自己定义了一个base.config.js 就是这个东西）修改他的出口path设置 要不就会在自己刚创建的build文件夹中打包自己写的代码

output:{

        path:path.resolve(__dirname,"../dist"), //在这里修改

        filename:"wangzhaoyang.js"

    },

• Vue CLI

1. 安装 npm install -g @vue/cli   
2. 查看版本 vue -V
3. 初始化vue init webpack 项目名称   //Vue CLI2

vue create 项目名称      //Vue CLI3

如果装脚手架失败 试试下面这两个

 

vue ui

• vue-router

1. 使用直接初始化vue init webpack 项目名称里面选中vue-router   //Vue CLI2
2. 在项目router目录有一个index.js文件

//配置路由

import Vue from 'vue'

import Router from 'vue-router'

// 将要显示的vue文件引入到这里

import about from "../components/about.vue"

import home from "../components/home.vue"

//让Vue使用Router插件

Vue.use(Router)

//配置路由和组件的关系

export default new Router({

  routes: [

    {

      path: '/about',

      component: about

    },

    {

      path: '/home',

      component: home

    }

  ]

})

1. 使用路由  //将下面的东西放到要渲染的页面上面

<router-link to="/about">about</router-link>

    <router-view></router-view>

 

1. 配置的一些小细节
   1. 修改路由映射

routes: [

    {

      path: '/',

      redirect:"/ahome" //可以将将上面的路由映射到这里

    },]

1. 1. 默认hash值 修改为htmlhistory路由

添加一条属性mode:”history”

export default new Router({

  routes: [

  ],

  mode:"history"  //添加这一条

})

1. 1. <router-link>修改渲染的目标dom 默认a标签

加一条tag=”要渲染成的dom标签”

<router-link to="/home" tag="button">home</router-link>

1. 1. 不留下历史记录 直接添加一个replace属性

那么访问这个就不会留下浏览记录

<router-link to="/home" tag="button" replace>home</router-link>

1. 1. 如果匹配到路由以后会自动添加一个class

 

修改class名方法1：

<router-link to="/home" active-class="abc">home</router-link>

修改class名方法2：

export default new Router({

  routes: [

    

  ],

  mode:"history",

  linkActiveClass:"aac"  //或者这样在这里修改

})

1. 1. 设置跳转路由

通过添加监听 仔方法里设置下面的语句

this.$router.push("/home");   //有浏览记录

this.$router.replace("/home");//无浏览记录

如果跳转到相同路由会报错的 下面这样就没事了

 this.$router.replace("/home").catch(err => err);

• 动态路由
  1. 配置路由

{

      path: '/use/:name1',

      component: use

    },

<router-link :to="'/use/'+name1">use</router-link>

1. 1. 小知识
      1. $routers 是路由
      2. $route  是当前正用的路由

this.$route.params.name1;

通过这个可以得到自定义的路由name1

• 路由的懒加载

用到的时候才会调用

const about=()=>import("../components/about.vue")

• 路由的嵌套

1. 将模板引入这个路由index文件

const newabout=()=>import("../components/newabout.vue")

1. 定义路由            //children 里面子路由的path不用加”/”  否则渲染不上去

{

      path: '/about',

      component: about,

      children:[

        {

          path:"newabout",   //不是"/newabout"

          component:newabout

        },

        {

          path:"newhome",

          component:newhome

        }

      ]

    },

1. 使用路由 //一定要写全路由格式

<router-link to="/about/newhome">newabout</router-link>

• 路由传参

1. 调用路由语句

<router-link :to="{path:'/profile',query:{age:1}}">档案</router-link>

router-link标签中的to属性 设置为动态监听： 然后里面的东西改为json类型数据

其中query属性里面传的就是参数 /profile?age=1

1. 得到传的结果

$route.query.age

1. js传参

dianji(){

      this.$router.push({

        path:"/profile",

        query:{

          name11:"wangzhaoyang"

        }

      }).catch(err => err);

    }

• 路由守卫（路由钩子）
  1. 全局守卫（钩子）

//全局守卫

//前置钩子

Router1.beforeEach(function(to,from,next){

  document.title=to.meta.title; //这里meta是理由一里面的元数据 数据的话可以定义在这里

console.log(to);

  next();

})

//后置钩子 没有next 不用主动进行next函数

Router1.afterEach(function(to,from){

  console.log("!");

  

})

2.局部守卫（钩子）

beforeEnter:function(to,from,next){

            console.log("我是子路由进来了");

            next();

          }

定义在路由里面 监听这一个路由 有多种守卫

next() 函数里面可以定义路由 可以定义json类型的路有数据路径啦啥的

• keep-live 遇见vue-router 路由缓存
  1. 先将含有子路由的组件用 keep-live标签包裹住vue-router

<keep-alive>

  <router-view></router-view>

  </keep-alive>

1. 1. 通过建立data 数据保存 路由

data(){

            return {

                  path:"/about/newabout"

            }

      },

1. 1. 通过这两个 函数调用

activated(){

   //这行语句是防止路由重读加载报错

  if (this.path === this.$route.path) return;

            this.$router.push(this.path);

            console.log("huoyue");

      },

beforeRouteLeave(to,from,next){

            this.path=this.$route.path;

            next();

      }

1. 1. 坑 这俩函数必须被 keep-live标签包裹才能使用

！！！注意包裹的是他上一级路由的<router-view></router-view> 要不不能使用

 deactivated(){

            

      },

 activated(){

    

      },

1. 1. include exclude

 

<keep-alive include="wa,name1">

  <router-view></router-view>

  </keep-alive>

• Promise
  1. 

   

其中resolve是将数据传给下一个then函数 reject的话直接将数据传给最后的错误处理函数

多个路由都需要的话 那么promise.all函数 其中then中接受的参数是数组 第一个数据是第一个写的resolve函数的数据

• Vuex

npm install vuex   直接安装最新的不用顾忌版本问题

1. 使用

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

const store=new Vuex.Store({

    //跟data数据一样

    state:{

        counter:100

    },

    //跟方法一样

    mutations:{

        increment(state,jieshow){ //通过这样设置 就可以接受参数了

            state.counter+=jieshow;

        }

    },

  // action是处理异步的mutations 用来放一些请求或者异步操作

    actions:{

    },

    //跟计算方法一样

    getters:{

        powercount(state){

            return function(age){

                return age

            };

        }

    },

    //这里可以以json的形式保存以上各种形式 将上面的东西模块化了

    modules:{

        

    }

})

export default store

1. 渲染进 main.js 函数里面

new Vue({

  el: '#app',

  store,    //通过组件渲染进Vue全局里面这样就可以全局使用

  components: { App },

  template: '<App/>'

})

3.

使用mutations

this.$store.commit("increment",13);  //第二个值为参数

特殊的提交风格

 

使用getters //相当于计算方法

$store.getters.powercount(12)   //这样写就可以传参数了

getters:{

        powercount(state){

            return function(age){   //通过这样设置 就可以接受参数了

                return age

            };

        }

    }

action的使用方法

 

modules

 

 

mutation使用

 

• Axios

 csdn 最全的讲解 axios详解_Hello Simon的博客-CSDN博客

1.基本实现方法

//1.执行GET请求

import axios from 'axios'

axios.get('/user?ID=12345')  //返回的是一个Promise

    .then(res=>console.log(res))

.catch(err=>console.log(err));

//2.可配置参数的方式

axios.get('/user',{

    params:{

        ID:12345

    }

}).then(res=>console.log(res))

    .catch(err=>console.log(err));

2.并发方法 加上

//发送多个请求(并发请求)，类似于promise.all，若一个请求出错，那就会停止请求

const get1 = axios.get('/user/12345');

const get2 = axios.get('/user/12345/permission');

axios.all([get1,get2])

    .then(axios.spread((res1,res2)=>{

      console.log(res1,res2);

  }))

    .catch(err=>console.log(err))

axios.spread /可以将数据结构为res1 ,res2

axios.spread((res1,res2)=>{

      console.log(res1,res2);})

3.可用axios,create([config])来创建一个新的实例，并设置相关属性

const instance = axios.create({

  baseURL: 'http://localhost:3000/api/products',

  timeout: 1000,

  headers: {'X-Custom-Header':'foobar'}

});

//instance的使用

instance.get('/user',{

  params:{ID:12345}

}).then(res=>console.log(res))

.catch(err=>console.log(err))

1. 拦截器interceptors

//添加一个请求拦截器

axios.interceptors.request.use(config=>{

  //在请求之前做一些事

  return config;    //！！！！！！必须return要不报错

},err=>{

 //请求错误的时候做一些事

  return Promise.reject(err);

});

//添加一个响应拦截器

axios.interceptors.response.use(response=>{

  //对返回的数据做一些处理

  reutrn response;  //！！！！！！必须return要不报错

},err=>{

 //对返回的错误做一些处理

  return Promise.reject(err);

});