项目中有用到轮播图的地方并且一屏中竖着展示两个，我用的是vue-awesome-swiper，感觉参数那不是很熟悉，记录一下

1.首先 需要安装vue-awesome-swiper

npm install vue-awesome-swiper --save

2.全局引入 main.js中引入

//轮播图
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'//(css 不显示的问题可能就在这)

3. 在组件中使用

// template中
<swiper :options="swiperOption">
     <swiper-slide v-for="(it,index) of learningData" :key="index">
       <span @click="enterDetail(it.id)">进入</span>
       <img
         :src="it.picture != null ? `/service/mooc-file-server/file/browse/${it.picture}`:require('@/assets/imgs/courseSet.png')"
         alt="" width="100%" height="132px">
     </swiper-slide>
     <div class="swiper-pagination" slot="pagination"></div>
 </swiper>



//  data函数中
swiperOption: {
    loop: false,  //是否循环播放
    slidesPerColumn: 2,  //竖着展示2张图片
    // slidesPerGroup: 2,
    autoplay: false,
    // 显示分页
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
  },