最近寫vue2.0專案中用到了輪播圖的一個外掛，也就是vue-awesome-swiper，個人感覺還是比較強大的，swiper官網中的API及配置均可使用(支援3.0)，以下說下使用該外掛的一些步驟：

第一步安裝

npm install vue-awesome-swiper --save

第二部在main.js中引入

然後就可以在元件中使用該外掛

<template>
	<div>
		<swiper :options="swiperOption"  ref="mySwiper">
			<!-- 這部分放你要渲染的那些內容 -->
			<swiper-slide v-for="item in items">
			</swiper-slide>
			<!-- 這是輪播的小圓點 -->
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>
<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		components: {
			swiper,
			swiperSlide
		},
		data() {
			return {
				swiperOption: {
				//是一個元件自有屬性，如果notNextTick設定為true，元件則不會通過NextTick來例項化swiper，也就意味著你可以在第一時間獲取到swiper物件，假如你需要剛載入遍使用獲取swiper物件來做什麼事，那麼這個屬性一定要是true
				notNextTick: true,
		        pagination: '.swiper-pagination',
		        slidesPerView: 'auto',
		        centeredSlides: true,
		        paginationClickable: true,
		        spaceBetween: 30,
		            onSlideChangeEnd: swiper => {
		            	//這個位置放swiper的回撥方法
		            	this.page = swiper.realIndex+1;
		            	this.index = swiper.realIndex;
		            }
		        }
			}
		},
		//定義這個sweiper物件
		computed: {

		    swiper() {
		      return this.$refs.mySwiper.swiper;
		    }
		},
		mounted () {
			//這邊就可以使用swiper這個物件去使用swiper官網中的那些方法
		    this.swiper.slideTo(0, 0, false);
		}

	}
</script>
<style>
</style>