如何使组件在代码依赖中可互换?

Question

我很难在codependency value中使用https://swiperjs.com/。我的代码在visual studio代码上工作得很好。但我想让它在相互依赖的情况下起作用，但它不起作用。有人能帮帮我吗?

这是我的codepen链接

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

这是我在codependency上的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

这是因为codependency不允许你导入像import { Swiper, SwiperSlide } from "swiper/vue";这样的东西

swiper/vue在包中定义。Json文件和一个相互依存的">笔"我不会让你这么做的。你可以尝试使用CDN代替，比如https://unpkg.com/browse/swiper@6.8.1/，但你可能会发现使用stackblitz或codesandbox更容易，而不是更类似于你的本地开发环境。