《vue+vant+node+mongoDB+koa2》电商项目实战连载（5）

这一节要做的是首页的轮播图模块，做好了之后，效果应该就是这样式的，

我们使用的是vant框架的 Swipe 轮播组件，

查看文档得到，使用它，应该先把它import进入进来，就像这样，

然后src/main.js的文件就是这样，

然后我在网上找了三张图片，把它们的路径链接写在vue文件中的data里，

<!-- 使用轮播图组件 -->

现在我们已经有数据了，那么怎么使用它呢？接着看代码的文档、演示，

喔~~~，原来是这样，其实还是一些封装好的自定义组件。把上面的代码直接复制到vue的template中，

这时如果你没有写错的话，页面上就应该会出现轮播图效果了。

<!-- 处理懒加载 -->

然后同学们有没有注意到，咱们的图片是http的远程图片，这种情况下我们需要处理一下懒加载，接着看文档，

就像刚才那样将Lazyload组件引入进来，然后在v-for循环中将加入就可以了，