vue3引入swiper6

第一步，安装

npm install swiper@6

我是直接去配置里面写的，然后install的，嘿嘿

第二步，引入与使用

我想要实现的是一个缩略图，我认为极具参考价值，那些基本的，删删减减就出来了

template部分

<swiper class="sw" :modules="[Thumbs]" :thumbs="{ swiper: thumbsSwiper }">
      <swiper-slide>11111</swiper-slide>
      <swiper-slide>2222</swiper-slide>
      <swiper-slide>33333</swiper-slide>
      <swiper-slide>44444</swiper-slide>
      <swiper-slide>555555</swiper-slide>
    </swiper>
    <swiper
      class="sw1"
      :modules="[Thumbs]"
      watch-slides-progress
      @swiper="setThumbsSwiper"
      :slides-per-view="3"
    >
      <swiper-slide>11111</swiper-slide>
      <swiper-slide>2222</swiper-slide>
      <swiper-slide>33333</swiper-slide>
      <swiper-slide>44444</swiper-slide>
      <swiper-slide>55555</swiper-slide>
    </swiper>

script部分

import HelloWorld from "@/components/HelloWorld.vue";
import { ref } from "vue";
import SwiperCore, { Thumbs } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
SwiperCore.use([Thumbs]);

export default {
  name: "Home",
  components: {
    HelloWorld,
    Swiper,
    SwiperSlide,
  },
  setup() {
    const thumbsSwiper = ref(null);
    const setThumbsSwiper = (swiper) => {
      thumbsSwiper.value = swiper;
    };
    // 将swiper_options返回给模板中的swiper组件使用
    return {
      Thumbs,
      thumbsSwiper,
      setThumbsSwiper,
    };
  },
};