我们要使用的轮播插件：

①按照提示安装插件

npm install vue-awesome-swiper --save

②全局引入插件，在main.js中加入以下内容。

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

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

组件中引入插件

// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

由于我们在各个页面都可能会用到轮播插件，因此我们选择全局使用的方式来引入。

③插件的使用
Github上给出了插件的不同使用方式：

Difference（使用方法的异同）：
SSR and the only difference in the use of the SPA:
· SPA worked by the component, find swiper instance by ref attribute.
· SSR worked by the directive, find swiper instance by directive arg.
· Other configurations, events are the same.

以下为我们会用到的SPA的使用方式：

<!-- The ref attr used to find the swiper instance -->
<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>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</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: 'carrousel',
    data() {
      return {
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

按照以上方法，我们新建一个Swiper.vue文件,并且按照自己的需求进行删减和更改。

<template>
  <div class="wrapper">
      <swiper :options="swiperOption">
        <!-- slides -->
        <!-- 轮播页面 简单的循环写法-->
        <swiper-slide v-for="item of swiperList" :key="item.id">
          <img class='swiper-img' :src="item.imgUrl"/>
        </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>
    </div>
</template>

<script>
export default{
  name: 'HomeSwiper',
  // 子组件里data是个函数，返回值是真正数据的内容
  data(){
    return{
      // 由于swiper绑定了swiperOption,所以必须定义，因此此处返回swiper绑定的数据
      swiperOption:{
        pagination: '.swiper-pagination',
        // 使最后一页和第一页可以循环
        loop: true,
      },
    }
  },
  props:{
    swiperList:Array
  }
}
</script>

<style scoped="">

  .wrapper >>> .swiper-pagination-bullet-active{
    background: #fff;
  }
  .swiper-img{
      /*完全显示图片*/
      width:100%;
  }
  .wrapper{
    /*防止抖动*/
    overflow: hidden;
    width: 100%;
    height:0;
    padding-bottom: 31.25%;
    /*在图片加载出来之前显示灰色*/
    background:#eee;
  }

</style>

最后在home.vue中引入swiper这个组件。

<template>
  <div>
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-recommend :recommendList="recommendList"></home-recommend>
  </div>
</template>

<script>
import HomeHeader from './Home/components/Header'
import HomeSwiper from './Home/components/Swiper'
import HomeIcons from './Home/components/Icons'
import HomeRecommend from './Home/components/Recommend'
import axios from 'axios'
import { mapState } from 'vuex'

export default{
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend
  }，
}
</script>