如何使 vue 组件在 codepen 中可交换？

Question

我很难在 codepen vue 中使用 https://swiperjs.com/。我的代码在 visual studio 代码上运行良好。但我想让它在 codepen 上工作，但它不工作。有谁能帮帮我吗？

这是我的代码笔link

https://codepen.io/iamcoder360/pen/oNWQyzY

这是我在 codepen 上的 vue 代码

<template>
  <div>
    <swiper
      @swiper="setSwiperRef"
      :slidesPerView="3"
      :centeredSlides="true"
      :spaceBetween="10"
      :pagination="{
        type: 'fraction',
      }"
      :navigation="true"
      :virtual="true"
      class="mySwiper"
    >
      <swiper-slide
        style=""
        v-for="(slideContent, index) in slides"
        :key="index"
        :virtualIndex="index"
        ><img :src="slideContent.img" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/swiper.scss";

import "swiper/components/pagination/pagination.min.css";
import "swiper/components/navigation/navigation.min.css";

import "./style.css";

// import Swiper core and required modules
import SwiperCore, { Pagination, Navigation, Virtual } from "swiper/core";

// install Swiper modules
SwiperCore.use([Pagination, Navigation, Virtual]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    // Create array with 3 slides
    const slides = Array.from({ length: 3 }).map(
      (_, index) => `Slide ${index + 1}`
    );
    return {
      slides: [
        {
          id: 1,
          img:
            "https://images.unsplash.com/photo-1628072504294-df57dc522fbd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
        },
        {
          id: 2,
          img:
            "https://images.unsplash.com/photo-1627840935425-3d333bb627f8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
        },
        {
          id: 3,
          img:
            "https://images.unsplash.com/photo-1628008043473-3e2a18a77852?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80",
        },
        {
          id: 4,
          img:
            "https://images.unsplash.com/photo-1628072504294-df57dc522fbd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
        },
        {
          id: 5,
          img:
            "https://images.unsplash.com/photo-1627840935425-3d333bb627f8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
        },
        {
          id: 6,
          img:
            "https://images.unsplash.com/photo-1628008043473-3e2a18a77852?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80",
        },
      ],
      swiperRef: null,
      appendNumber: 3,
      prependNumber: 1,
    };
  },
  methods: {
    setSwiperRef(swiper) {
      this.swiperRef = swiper;
    },
    slideTo(index) {
      this.swiperRef.slideTo(index - 1, 0);
    },
  },
};
</script>

Answer 1

这是因为 codepen 不会让你导入像 import { Swiper, SwiperSlide } from "swiper/vue";

这样的东西

swiper/vue 在您的 package.json 文件中定义，代码笔“pen”不会让您这样做。您可以尝试使用 CDN，例如 https://unpkg.com/browse/swiper@6.8.1/，但您可能会发现使用 stackblitz or codesandbox 更容易，因为它更类似于您的本地开发环境。

如何使 vue 组件在 codepen 中可交换？

How to make vue component swappable in codepen?

swipe

codepen

vuejs3