參考：
github地址：https://github.com/surmon-china/vue-awesome-swiper

1.安裝包：vue-awesome-swiper
npm install vue-awesome-swiper@3.1.1 --save-dev
注意，我最開始安裝的是 vue-awesome-swiper最新版本4.11，但是在ios10上有輪播圖不輪播的兼容性bug，為了解決這個問題，所以安裝了比較舊3.1.1版本。

2.在main.js中引入如下內(nèi)容：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3.在組件中使用：

<swiper  ref="mySwiper" :options="swiperOption">
      <swiper-slide>
          <img :src="bannerImage[0]" alt="pic" />
      </swiper-slide>
      <swiper-slide>
          <img @click="goToUrl()" :src="bannerImage[1]" alt="pic" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

data() {
    return {
      bannerImage: '',
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        paginationClickable: true,
        observer: true, // 修改swiper自己或子元素時，自動初始化swiper
        observeParents: true, // 修改swiper的父元素時，自動初始化swiper
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        scrollbar: '.swiper-scrollbar',
        speed: 300,
        bannerUrl: '',
      },
    }
  },

autoplay：是否自動播放，其中的delay是每個圖片展示時長。
speed：切換速度。
pagination：輪播圖上的小圓圈，注意如果不寫clickable: true，小圓圈展示不出來。
loop：是否循環(huán)播放。注意，如果添加了循環(huán)參數(shù)loop為true，則會有點擊第一張圖片不能跳轉到指定連接的bug。
bannerImage=['/static/images/test.jpg', '/static/images/test.jpg']，static是vue框架中的目錄。