swiper6.0.0~6.1.3版本不支持vue3.0 Composition API吗？

Z时代
2024-03-02
分类：IT

在测试vue3.0使用swiper的时候，发现6.0.0~6.1.3版本swiper不能按照如下代码的方式实现轮播图功能，在测试的时候发现，执行npm install swiper@6.x.x之后（安装6.0.x~6.1.x的任意版本），node_modules文件夹下的swiper文件夹中不会生成如下文件夹及文件
swiper6.0.0~6.1.3版本不支持vue3.0 Composition API吗？
外层也没有swiper-vue.cjs.js等与vue相关的文件生成

<template>
  <div>
    <swiper
      :autoplay="swiper_options.autoplay"
      :loop="swiper_options.loop"
      :speed="swiper_options.speed"
      :pagination="swiper_options.pagination"
      :navigation="swiper_options.navigation"
    >
      <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>
  </div>
</template>
<script>
import { reactive } from "vue";
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper";
//将swiper/vue换成swiper/bundle或swiper/core也不行
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/navigation/navigation.scss";
SwiperCore.use([Autoplay, Pagination, Navigation]);
export default {
  name: "Home",
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    let swiper_options = reactive({
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      loop: true,
      speed: 1000,
      pagination: {
        clickable: true
      },
      navigation: {
        clickable: true
      }
    });
    return { swiper_options };
  }
};
</script>
<style lang="css">
.swiper-container {
  height: 500px;
  width: 100%;
}
.swiper-wrapper {
  position: relative;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  background-color: lightblue;
  text-align: center;
  line-height: 500px;
}</style>