vue脚手架配置代理 axios请求 slot插槽

vue脚手架配置代理

方法一

在vue.config.js中添加如下配置

devServer:{

    proxy:"https://localHost:8080"

  }

说明:

1.优点:配置简单，请求资源时直接发给前端(8080)即可

2.缺点: 不能配置多个代理,不能灵活的控制请求是否走代理

3.工作方式: 若按照上述配置代理，当请求了前端不存在的资源时，那么该

请求会转发给服务器(优先匹配前端资源)

方法二

编写vue.config.js配置具体代理规则

module.exports ={

  lintOnSave:false,//关闭语法检查

   devServer:{                        //开启代理服务器(方式二)

       proxy:{

         '/api':{           //请求前缀    匹配所有以 '/api'开头的请求路径

           target:"https://api-v2.chuangkit.com",     //代理目标的基础路径

           pathRewrite:{'^/api':''},    

           ws:true,                                           //用于支持websocket

           changeOrigin:true                              //用于控制请求头中的host值

         },

         '/good':{           //请求前缀

          target:"https://api.com",

          pathRewrite:{'^/good':''},    

          ws:true,          //用于支持websocket

          changeOrigin:true       //用于控制请求头中的host值

        },}}}

说明:

1.优点:可以配置多个代理,且可以灵活的控制请求是否走代理

2.缺点: 配置略微繁琐,请求资源时必须加前缀

axios请求

npm i axios         //安装axios

import axios from 'axios'             //引入

 methods: {

    getStudents(){

      axios.get("/api/接口").then(

        response => {                //response.data才是接口里面的数据

          console.log('请求成功了',response.data);

        },

        error => {                      //error.message    请求失败的原因

          console.log('请求失败了',error.message);

        }) }},

slot插槽

1.作用:让组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ====> 子组件

2.分类:默认插槽 ，具名插槽， 作用域插槽

        (1)默认插槽

父组件中:

html结构

子组件中:

2.具名插槽

         

         

子组件中:

   

我是一个默认值，

       我是一个默认值

3.作用域插槽

1.理解:数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

2.具体代码

父组件中