1. 下载vue-svue-awesome-swiper
   为了更稳定不建议使用最新版本

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

2. 在main.js中全局引入并使用这个插件，同时也要引入插件的css文件

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

后边可以跟一些默认的配置参数，如果没有可以不写。

3. 在文件中使用插件写轮播图

<template>
  <swiper :options="swiperOption" >
    <!-- 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 controls -->
     <!-- 如果需要分页器-->
    <div class="swiper-pagination"  slot="pagination"></div>
     <!-- 如果需要左右箭头-->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
     <!-- 如果需要导航条-->
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
   	//参数数据
      swiperOption: {
        pagination: '.swiper-pagination',  //使用分页器
        loop: true,  //循环
        autoplay: 2000  //自动播放
      },
    }
  }
}
</script>

这样就写好了一个简单的带分页器的、可以自动循环播放的轮播图。

在vue当中，需要改变分页器的颜色样式，直接强制改变是没有用的，因为受到scope的的影响，样式只能在当前组件生效，但是swiper是全局引入的，这里就需要用到样式穿透。

<style scoped lang="stylus">
.wrapper>>>.swiper-pagination-bullet-active
    background-color: #fff !important
</style>