vue中使用swiper插件（版本3）

一、安装指定版本

npm install vue-awesome-swiper@3 --save-dev

安装成功后，可以在package.json查看安装信息

二、组件中使用

<template>
  <div class="home">
    <!-- <h1>首页</h1> -->
    <navBar class="navBar">
      <span slot="center">购物街</span>
    </navBar>

    <!-- swiper -->
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide><img src="../../assets/images/6.png" alt=""></swiper-slide>
      <swiper-slide><img src="../../assets/images/7.png" alt=""></swiper-slide>
      <swiper-slide><img src="../../assets/images/8.png" alt=""></swiper-slide>
      <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>
    </swiper>

  </div>
</template>

<script>
import navBar from "components/common/navBar/navBar";

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  name: "home",
    components: {
    navBar,
    swiper,
    swiperSlide
  },
  data() {
    return {
      //swiper 初始化
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  }
};
</script>

参考：https://www.cnblogs.com/wangyihong/p/13393469.html