一般做移動端輪播圖的時候，最常用的就是Swiper外掛了，而vue.js也有一個輪播元件vue-awesome-swiper，用法跟swiper相似。

1.安裝vie-awesome-swiper

nam install vue-awesome-swiper --save-dev

2.引用vie-awesome-swiper元件，這裡我是用vie-cli建立的專案,在main.js：

import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper) //記得不要忘記這句

3.Home.vue下使用

<template>
<div>
<swiper :options="swiperOption" ref="mySwiperA">
    <!-- 幻燈內容 -->
    <swiper-slide>slide1</swiper-slide>
    <swiper-slide>slide2</swiper-slide>
    <!-- 以下控制元件元素均為可選 -->
    <div class="swiper-pagination"  slot="pagination"
 
></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
</swiper>
</div>
</template>

<script>
    export default
 
{
        data(){
            return {
                swiperOption: {
                    // 所有配置均為可選（同Swiper配置）  
                    notNextTick: true,
                    autoplay: 3000,
                    grabCursor : true,
                    setWrapperSize :true,
                    autoHeight: true,
                    pagination : '.swiper-pagination',
                    paginationClickable :true,
                    prevButton:'.swiper-button-prev',
                    nextButton:'.swiper-button-next',
                    scrollbar:'.swiper-scrollbar',
                    mousewheelControl : true,
                    observeParents:true,
                    onTransitionStart(swiper){
                      console.log(swiper)
                    }
            }
        }
    },
    computed: {
        swiper() {
          return this.$refs.mySwiperA.swiper
        }
    },
    mounted() {
        console.log("每次切換都會觸發我");
        this.swiper.slideTo(3, 1000, false)
      }
}
</script>