在vue中使用vue-awesome-swiper插件

1.在命令行里面输入

npm install vue-awesome-swiper@2.6.7 --save

2.在main.js文件里面写入一下代码

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

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

3.在组件中应用vue-awesome-swiper插件

3.1.template标签内的内容

  <div class="swiper_wrap">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item in swiperarr" :key="item.id">
        <img class="img_tab" :src="item.url" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>

3.2.script标签内容

export default {
  name:'HomeSwiper',
  data () {
    return {
      swiperOptions: {
        // 分页器设置
        pagination: '.swiper-pagination',
        // 环状轮播
        loop: true
      },
      swiperarr:[
        {url:'https://imgs.qunarzz.com/vs_ceph_vcimg/79faa5a73731e84a7731db49d5baa91e.jpeg',id:'0'},
        {url:'https://imgs.qunarzz.com/vs_ceph_vcimg/c0a60fa20379efa4f02ce527a680dc1b.jpeg',id:'1'},

      ]
    };
  }
}

3.3.css部分代码

<style lang='stylus' scoped>
.swiper_wrap >>> .swiper-pagination-bullet-active
  background: #fff

.swiper_wrap
   100%
  height: 32.5vw
  .img_tab
     100%
</style>