官方这个不大好用因为有版本兼容问题：

https://swiperjs.com/vue

可以参考如下方式：主要是版本兼容问题

即：

 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