Vue项目使用vue-awesome-swiper实现移动端轮播图

1.用vue-awesome-swiper（配置参数与swiper插件一样）做移动端的轮播图：参考https://github.com/surmon-china/vue-awesome-swiper。

2. 下载：npm install vue-awesome-swiper --save
3. 引入：在main.js文件中
 

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

 4. 使用：
    

<swiper :options="swiperOption" ref="mySwiper" class="swiper">
        <swiper-slide v-for="(item,index) in banners" :key="index" class="swiper_item">
            <img :src="item.src" alt="轮播图" class="pic"/>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>      
</swiper>
data() {
      return {
        swiperOption: {
          loop : true,
          autoplay:true,
          pagination: {  //分页器
            el: '.swiper-pagination',
          },
        }
      }
},
computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
},

.swiper{
	width: 100%;
	min-height: 1px;	
}
.pic{
	width: 100%;
}