vue项目--仿网易云音乐（day2）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情

上一篇文章中我们完成了头部的两个图标和四个span标签的均匀排布问题，接下来我们将会完成轮播图组件的实现。

1. 首先，我们在components中创建一个swiperCom.vue组件，然后在HomeView.vue主页面文件中注册，引入，创建这个组件即可使用了。
2. 轮播图数据的获取，我们这个项目的数据地址都在gitHub的一个文件中，接口的样式如下所示：

我们将接口文件下载到电脑上之后，用vscode打开，然后新建一个终端窗口，输入node app.js,这样我们的项目接口就跑起来了，我们找到轮播图banner的数据,然后我们需要下载axios进行接口数据的请求，在MusicApp项目终端窗口中输入npm install axios,等待下载完成，之后我们在项目根目录中创建一个api文件夹，创建index.js文件，引入axios，然后向外暴露一个getBanner方法，return获得的轮播图数据，具体的代码如下所示：

import axios from 'axios';
/* 获取轮播图得api */
export function getBanner(type=0){
    return axios.get(`http://localhost:3000/banner?type=${type}`)
}

3. 然后在swiperCom.vue文件中引入getBanner这个方法，并且将获得的轮播图数据赋值给在data中return的swiperList空数组
4. 然后引入Vant组件库中的van-swipe组件，具体轮播链接：vant-contrib.gitee.io/vant/#/zh-C… ， 复制粘贴好了组件代码之后，我们通过v-for循环swiperList这个数组，并且绑定一个key值，注意img中的src属性需要动态绑定，这样数据中的图片才会渲染到页面上，具体代码如下图所示：