6.跨域和发送请求

1.安装依赖

yarn add axios

2.utils/config.js中导入axios

import axios from 'axios'    //导入
axios.defaults.baseURL='http://192.168.14.49:5000'   //主地址
Vue.prototype.axios=axios;

3.对应的文件index.vue中发送请求

import ItemIndex from '@/components/ItemIndex'  //导入组件
export default {
   name:"Music",
   data(){
       return{
           playlists:[]
       }
   },
    //注册组件
   components:{
       ItemIndex
   },
   mounted(){
       this.axios.get("/top/playlist?cat=华语&limit=12").then(res=>{
           this.playlists=res.data.playlists
       })
   }
}
//4.渲染数据
<template>
  <div class="container">
      <item-index :data="item" v-for="item of playlists" :key="item.id">
         <div slot="icon" class="icon">
            <img src="../../assets/images/p0.png" alt="">
            {{item.playCount}}
         </div>
      </item-index>
  </div>
</template>

1-6课件地址https://gitee.com/wangsiman/notebooks/tree/master/vue/07rem-router