在 vue-cli 中使用 swiper 轮播图遇到的大坑

此坑最大的问题 -- 版本不对

按照 swiper 官网的教程默认安装是用不了的

官方的安装教程：npm install swiper vue-awesome-swiper --save

• 此时 vue-awesome-swiper 默认安装最新的 vue-awesome-swiper@4
• swiper 默认安装最新的 swiper@6【这是最大的坑 vue-awesome-swiper最新版不支持swiper6，只支持swiper5】
• 引入 css 依赖时的路径为 import 'swiper/swiper-bundle.css'
• 然后此时会报错【反正就是怎么改都报错，最后是找不到 this.$refs.mySwiper.swiper 中的 .swiper 一直是 undefined 】

正确的安装方法

• 安装旧的 swiper 版本,npm install swiper@5 --save
• 安装旧的 vue-awesome-swiper 版本 ，npm install vue-awesome-swiper@3 --save-dev
• 此时引入 css 依赖 import "swiper/dist/css/swiper.css
• 我安装的时候没有 dist 文件夹，我直接创建一个 dist 文件夹，然后把 css 文件夹拖进 dist 中就可以了【不想再出错，所以用了这个办法，估计改一下 import 的目录也是没问题的】

不报错的 swiperOption 写法

swiperOption: {
  loop: true,
  autoplay: {
    delay: 3000,
    stopOnLastSlide: false,
    disableOnInteraction: false
  },
  direction: 'vertical',
  // 显示分页
  pagination: {
    el: ".swiper-pagination",
    clickable: true //允许分页点击跳转
  },
  // 设置点击箭头
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
}

所有相关代码

• html

<swiper :options="swiperOption" ref="mySwiper">
  <swiper-slide v-for="(item, index) in myArray" :key="index">{{item}}</swiper-slide>
</swiper>

• 引入依赖

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

data() {
  return {
    swiperOption: {
      loop: true,
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      direction: 'vertical',
      // 显示分页
      pagination: {
        el: ".swiper-pagination",
        clickable: true //允许分页点击跳转
      },
      // 设置点击箭头
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    }
  }
},
computed: {
  swiper() {
    return this.$refs.mySwiper.swiper;
  }
},
mounted() {
  console.log("this is current swiper instance object", this.swiper);
},