1.安装swiper

cnpm install swiper@3.2.0 vue-awesome-swiper@3.1.3 --save-dev

2.局部引入 和 使用

<template>
    <div>
        <swiper
          :options="swiperOption"
          ref="mySwiper"
          class="swiper-container swiper"
        >
          <swiper-slide class="swiper-slide" v-for="item in list" :key="item.id">
            <img :src="item.url" /> -->
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
    components: {
       swiper,
       swiperSlide
    },
    data() {
        return {
              swiperOption: {
                    centeredSlides: true,
                    loop: true,
                    autoplay: {
                      delay: 3000,
                      disableOnInteraction: false //用户操作之后是否停止自动轮播默认true
                    },
                    observer: true,
                    observerParents: true,
                    pagination: {
                      el: ".swiper-pagination",
                      type: "custom",
                      renderCustom: function(swiper, current, total) {
                        return current + "/" + total;
                      }
                    }
              },
        }
    },
    computed: {
        swiper() {
          return this.$refs.mySwiper.swiper;
        }
    },
}
</script>