vue-awesome-swiper 报错记录

版本导致的swiper参数报错
版本导致的左右操作按钮失效或不规律切换

// 注意安装提示！！！
首先安装 vue-awesome-swiper

cnpm i vue-awesome-swiper --save
✔ Installed 1 packages
✔ Linked 1 latest versions
✔ Run 0 scripts
// 这个地方提示了：需要一个swiper@^5.2.0的依赖项，接下来安装一下就可以了(由于vue-awesome-swiper版本的不同，所依赖的swiper版本会有所不同)
peerDependencies WARNING vue-awesome-swiper@* requires a peer of swiper@^5.2.0 but none was installed
✔ All packages installed (1 packages installed from npm registry, used 283ms(network 279ms), speed 124.94kB/s, json 2(34.86kB), tarball 0B)

cnpm i swiper@^5.2.0 --save 
✔ Installed 1 packages
✔ Linked 2 latest versions
[1/1] scripts.postinstall swiper@^5.2.0 run "echo \"\u001b[35m\u001b[1mLove Swiper? Support Vladimir's work by donating or pledging on patreon:\u001b[22m\u001b[39m\n > \u001b[32mhttps://patreon.com/vladimirkharlampidi\u001b[0m\n\"", root: "/Users/jiangchunming/Desktop/GIT/fullsee-healthy/node_modules/_swiper@5.4.5@swiper"
Love Swiper? Support Vladimir's work by donating or pledging on patreon:
 > https://patreon.com/vladimirkharlampidi
[1/1] scripts.postinstall swiper@^5.2.0 finished in 6ms
✔ Run 1 scripts
✔ All packages installed (3 packages installed from npm registry, used 1s(network 1s), speed 634.26kB/s, json 3(13.78kB), tarball 831.69kB)

<template>
  <div class="swiper-box">
     <swiper :options="swiperOption">
       <swiper-slide>Slide 1</swiper-slide>
       <swiper-slide>Slide 2</swiper-slide>
       <swiper-slide>Slide 3</swiper-slide>
       <swiper-slide>Slide 4</swiper-slide>
       <swiper-slide>Slide 5</swiper-slide>
       <swiper-slide>Slide 6</swiper-slide>
       <swiper-slide>Slide 7</swiper-slide>
       <swiper-slide>Slide 8</swiper-slide>
       <swiper-slide>Slide 9</swiper-slide>
       <div slot="button-prev" class="swiper-button-prev" />
       <div slot="button-next" class="swiper-button-next" />
     </swiper>
   </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'SwiperTest',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 'auto',
        slidesPerGroup: 1,
        spaceBetween: 10,
        centerInsufficientSlides: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .swiper-box {
    .swiper-slide {
      width: 300px;
      height: 300px;
    }
  }
</style>

Github vue-awesome-swiper
Swiper 中文文档 swiper v4~v6 API