swiper插件+vue实现图片轮播还有碰到的坑

今天踩了个大坑，就没碰到这么坑的，官方文档最坑。
（官方文档没说版本差异，所以跟着版本操作会找不到文件而运行报错）

第一步

安装vue-awesome-swiper和swiper
(官方文档只需要swiper)
（vue-awesome-swiper是针对vue+swiper的封装插件）
相对应的版本如下：

 "vue": "^2.5.2",
 "swiper": "^5.4.5",
 "vue-awesome-swiper": "^4.1.1",

命令（这个命令我没试过，因为我已经走了很多弯路，直接删了依赖，直接改版本号，再下载全部依赖)

cnpm install vue-awesome-swiper swiper@5.4.5 --save

第二步

这里弄完了之后，就可以用来了，剩下的就自己研究吧，我也还没研究透彻（下面注解研究了一点），哈哈哈啊哈哈啊哈哈，百度了一上午了，就很开心终于解决了，总是碰到这些奇奇怪怪的神仙问题

<template>
  <div style="border: 1px solid red">
    <div class="recommendPage">
      <swiper class="swiper"
              :options="swiperOption"
              autoplay="6000">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <!-- 分页 -->
        <!-- <div class="swiper-pagination"
             slot="pagination"></div> -->
      </swiper>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'home',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOption: {
        autoplay: {
          delay: 2000,
          // 是否持续轮播（默认false）
          stopOnLastSlide: false,
          // 是否交互（默认false）
          disableOnInteraction: false
        },
        // 解决最后一张从右弹到左边第一张的样式问题
        loop: true
        // 设置点击箭头
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev'
        // }
        // 显示分页
        // pagination: {
        //   el: '.swiper-pagination',
        //   dynamicBullets: true
        // }
      }
    }
  }
}
</script>
<style scoped >
.recommendPage .swiper-container {
  position: relative;
  width: 100%;
  height: 400px;
  /* background: pink; */
}
.recommendPage .swiper-container .swiper-slide {
  width: 100%;
  line-height: 400px;
  background: yellowgreen;
  color: #000;
  font-size: 16px;
  text-align: center;
}
</style>