vue3中使用swiper

在Vue3中使用Swiper，首先需要引入Swiper的核心库和相关组件，并注册为Vue组件。然后，在Vue的setup函数中使用ref()创建一个引用变量来获取Swiper实例。在onMounted钩子函数中，你可以打印这个引用变量，以确保实例已经被正确地获取到。

具体的代码示例如下：

<template>
  <swiper :slides-per-view="1" :scrollbar="{ draggable: true }" ref="mySwiper">
    <swiper-slide>1</swiper-slide>
    <swiper-slide>2</swiper-slide>
    <swiper-slide>3</swiper-slide>
  </swiper>
</template>

<script>
import SwiperCore, { Scrollbar, Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper.scss'
import 'swiper/components/scrollbar/scrollbar.scss'
import 'swiper/components/pagination/pagination.scss'
import { ref, defineComponent, onMounted } from 'vue'

SwiperCore.use([Scrollbar, Pagination])

export default defineComponent({
  name: 'Warhouse',
  components: { Swiper, SwiperSlide },
  setup() {
    const mySwiper = ref(null)

    onMounted(() => {
      console.log(mySwiper.value) // 打印Swiper实例
    })

    return {
      mySwiper
    }
  }
})
</script>

这样就可以在Vue3中使用Swiper了。记得根据你的实际情况调整Swiper的版本和其他配置。