Vue脚手架使用swiper轮播图|Vue脚手架使用swiper轮播图,CV大法好！ Vue脚手架使用swiper轮播图|CV大

时隔多日，我又更新了，今天写一个Vue脚手架swiper轮播图的使用方法。
首先在项目内安装swiper

//如果安装过镜像的可以使用cnpm，国内会更快些 npm install swiper vue-awesome-swiper --save

vue-awesome-swiper中也有教程
我们使用局部的,script中写入如下代码：

template下的div中加入以下代码

Slide 1 Slide 2 Slide 3 Slide 4 Slide 5

【Vue脚手架使用swiper轮播图|Vue脚手架使用swiper轮播图,CV大法好！】这时已经有了基本轮廓了，因为我们要做的是轮播图，所以把swiper-slide标签中的内容替换成img图片。

文章图片
image.png 这时已经可以左右拨动了，更多的效果，我们需要到swiper的API文档中查看
这时，我们需要在之前的script下的export default中加data来添加样式

20200618121708777.gif 这样，一个简单的swiper轮播图就做好了，之前说的API文档中有更多的swiper样式，大家可以去深入研究。

Vue脚手架使用swiper轮播图|Vue脚手架使用swiper轮播图,CV大法好！