vue中使用vue-awesome-swiper插件，实现轮播图

参考：
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中引入如下内容：

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：是否循环播放。注意，如果添加了循环参数loop为true，则会有点击第一张图片不能跳转到指定连接的bug。
bannerImage=['/static/images/test.jpg', '/static/images/test.jpg']，static是vue框架中的目录。