6.首页轮播图配置及数据渲染

1. 创建如下文件，并写好插件，对组件进行集中管理，完整代码如下

import { Swipe, SwipeItem,Button } from 'vant';

// 放入数组中，循环遍历，方便
let plugins=[
    Swipe,SwipeItem,Button
]   
// 调用函数取值,并导出函数,之后便可以在main.js使用，用get传参，把app传进去
export default function getVant(app){
    plugins.forEach((item)=>{
        return app.use(item)
    })
}

 2. 在main.js中完成配置，代码有所修改，完整代码如下

import { createApp } from 'vue'
import App from './App.vue'
import getVant from './plugins'
import router from './router'
import store from './store'

const app=createApp(App)
getVant(app) // 传入app后便可以使用这个组件,在index中返回这个值
app.use(store)
app.use(router).mount('#app')

3. 实现轮播图

https://vant3.uihtm.com/#/zh-CN/swipe

这里使用懒加载，当swipe中含有图片时，通过lazy-render属性开启懒加载模式，在该模式下，只会渲染当前页和下一页。

a. 在TopSwiper.Top写轮播图

export default {
  setup() {
    const images = [
      'https://unpkg.com/@vant/assets/apple-1.jpeg',
      'https://unpkg.com/@vant/assets/apple-2.jpeg',
    ];
    return { images };
  },
};

b. 使用banner，链接如下

https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=banner

说明 : 调用此接口 , 可获取 banner( 轮播图 ) 数据

ps. 由于使用的的iphone，所以type是2，如下，在后面用axios获取数据会使用

/banner?type=2

4. 使用npm安装axios

npm install axios

5. 启动网易云音乐后端，项目已打包

链接：https://pan.baidu.com/s/18YmPPC2mZiOH-p4IpSfENA 
提取码：1111

在vscode中打开项目后，先安装依赖

npm install

在后端项目路径下，打开命令窗口：找到文件，路径全选删除，写cmd回车即可

输入以下指令，启动后端（或者安装依赖后直接输入指令启动）

node app.js

出现了域名，说明后端启动成功，此界面不要关闭！！！

 

之后用vue3语法写好setup方法与onMounted方法，之后运行，按F12后会在（console）控制台中出现下面的data，banner说明获取了轮播图的数据，之后将数据渲染到轮播图中

使用vue3中的reactive完成相应，修改响应式对象，所有地方的state均是后加的（定义、循环等）

6. 完善轮播图，完整代码如下

补充：style中的样式名可以这样看

7. 轮播图效果如下