Vue微型项目（九）——轮播图+上拉加载、下拉刷新+回到顶部

同样，我们再来看下到目前为止，我的项目已经实现的效果，基本布局已经实现，也实现了基本页面之间的跳转，但是现在最大的不足有，在地址栏中必须要输入localhost:8080/user/nologin 或者 localhost:8080/user/loging， 才能够跳转到我们想要去往的页面，这显然是不现实的。

---

那么接下来，我们要实现的是首页的轮播图模块，一起来看下如何实现，期间又会有哪些技术点，又会遇到哪些坑呢？

一. 理解vant ui库

这边有一个vant 库的文档 https://youzan.github.io/vant/#/zh-CN/intro， 我们实现的轮播图效果是采用该API中的 Swipe轮播 插件

1. 安装

这里，要Ctrl+C 中断原来项目的执行，进行 vant 的安装，cnpm i vant -S，这里还是优先选用 cnpm 进行安装

2. 引入组件

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

3. 还需要安装 babel组件，安装命令是 cnpm i babel-plugin-import -D

4. 插入轮播图

在 src/views/home/index.vue 文件中，添加轮播图 的代码，其中，要在 template 部分加上 .banner 部分。按照官方文档，添加代码如下，

实现的效果为，

5. 请求数据，更换轮播图图片

此时，轮播图的图片能够正