day48-测试平台搭建之前端vue学习之Vue-Cli-3

一、vue脚手架配置代理

        1.1.方法一

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

devServer:{
  proxy:"http://localhost:5000"
}

                2).说明

                        2.1).优点：配置简单，请求资源时直接发给前端（8080）即可。

                        2.2).缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

                        2.3).工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源）

        1.2.方法二

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

module.exports = {
  devServer: {
    proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}

                2).说明

                        2.1).优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

                        2.2).缺点：配置略微繁琐，请求资源时必须加前缀。

二、插槽

        2.1.作用：让父组件可以向子组件指定位置插入htm结构，也是一种组件间通信的方式，适用于<strong style="color:red">父组件===>子组件</strong>

        2.2.分类：默认插槽、具名插槽、作用域插槽

        2.3.使用方式

                1).默认插槽

父组件中：
  <Category>
              <div>html结构1</div>
                </Category>
    子组件中：
      <template>
      <div>
      <!-- 定义插槽 -->
      <slot>插槽默认内容...</slot>
      </div>
      </template>

                2).具名插槽

父组件中：
  <Category>
    <template slot="center">
      <div>html结构1</div>
    </template>

      <template v-slot:footer>
      <div>html结构2</div>
    </template>
    </Category>
      子组件中：
      <template>
      <div>
      <!-- 定义插槽 -->
      <slot name="center">插槽默认内容...</slot>
      <slot name="footer">插槽默认内容...</slot>
    </div>
    </template>

                3).作用域插槽

                        3.1).理解：<span style="color:red">数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)

                        3.2).具体编码

父组件中：
  <Category>
    <template scope="scopeData">
      <!-- 生成的是ul列表 -->
      <ul>
        <li v-for="g in scopeData.games" :key="g">{{g}}</li>
      </ul>
    </template>
    </Category>

      <Category>
      <template slot-scope="scopeData">
      <!-- 生成的是h4标题 -->
      <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
    </template>
    </Category>
      子组件中：
      <template>
      <div>
      <slot :games="games"></slot>
    </div>
    </template>

      <script>
      export default {
      name:'Category',
      props:['title'],
      //数据在子组件自身
      data() {
      return {
      games:['红色警戒','穿越火线','劲舞团','超级玛丽']
      }
      },
      }
    </script>

三、今日学习思维导图