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

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

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

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

<script>
	import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
	import 'swiper/css/swiper.css'
	 
	export default {
		components: {
			Swiper,
			SwiperSlide
		},
		directives: {
			swiper: directive
		}
	}
</script>

template下的div中加入以下代码

<swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
	<div class="swiper-pagination" slot="pagination"></div>
</swiper>

这时已经有了基本轮廓了，因为我们要做的是轮播图，所以把swiper-slide标签中的内容替换成img图片。

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

<script>
	import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
	import 'swiper/css/swiper.css'
	 
	export default {
		components: {
			Swiper,
			SwiperSlide
		},
		directives: {
			swiper: directive
		}，
		data() {
	    	return {
	        	swiperOptions: {
	        		//添加分页器
	            	pagination: {
	            		//默认的圆点类型
	                	el: '.swiper-pagination'
	            	},
	            	//环路,当为true时则会循环
	            	loop : true,
	            	//切换样式
		            effect:'coverflow',
		            //自动切换
		            autoplay: {
		            	//隔2000ms切换一次
		            	delay: 2000
		            },
	        	}
	    	}
	    },
	}
</script>

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