vue-awesome-swiper插件书写移动端基本的轮播图

安装：利用vue-cli这个工具创建一个vue项目，然后在项目中安装这个插件，详细方式可见官网，我用的是npm安装

npm install vue-awesome-swiper --save

引入这个插件：一般情况下可能多个页面要使用到轮播图，就全局引入这个插件，当然如果只需要局部用这个插件可以局部引用。我使用的是全局引用。

在main.js文件中添加下面三句（即引入了这个轮播插件）：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

然后就可以利用这个插件写轮播组件了，下面是一个整的样子，自己可根据需求进行适当的删减

<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <!-- Optional c