官方这个不大好用因为有版本兼容问题:
可以参考如下方式:主要是版本兼容问题
即:
npm install node-sass@4.14.1 -S
npm install sass-loader@7.3.1 -S
npm install swiper@6.7.0 -S
然后在vue中复制官方上的文档
即:
<template>
<swiper
:slides-per-view="3"
:space-between="50"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
...
</swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/swiper.scss';
export default {
components: {
Swiper,
SwiperSlide,
},
methods: {
onSwiper(swiper) {
console.log(swiper);
},
onSlideChange() {
console.log('slide change');
},
},
};
</script>
最终的效果如下:
更详细的使用请参考:
https://blog.csdn.net/jjw_zyfx/article/details/117884136?spm=1001.2014.3001.5501