第一步安裝：npm install vue-awesome-swiper --save

第二部在main.js裡引入：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'（如果你使用的是2.6.0以上的版本要自己手動去載入css）
Vue.use(VueAwesomeSwiper)

第三部元件開發：

<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>