vue3上使用swiper

要在Vue3中使用Swiper，首先需要安装Swiper库：

npm install swiper --save

然后，在需要使用Swiper的组件中，导入Swiper：

import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';

在组件的mounted生命周期钩子中，初始化Swiper：

mounted() {
  var swiper = new Swiper('.swiper-container', {
    // Swiper的配置选项
  });
}

注意，这里的`.swiper-container`是一个包含Swiper滑块的DOM元素的类名，需要在模板中添加：

<template>
  <div class="swiper-container">
    <!-- Swiper滑块的内容 -->
  </div>
</template>

然后就可以根据Swiper的配置选项来配置Swiper了。例如，可以设置Swiper的方向、轮播、分页等等：

var swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
});

最后，记得在组件销毁时销毁Swiper：

beforeDestroy() {
  if (this.swiper) {
    this.swiper.destroy();
    this.swiper = null;
  }
}

完整代码示例：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';

export default {
  mounted() {
    this.swiper = new Swiper('.swiper-container', {
      direction: 'horizontal',
      loop: true,
      pagination: {
        el: '.swiper-pagination',
      },
    });
  },
  beforeDestroy() {
    if (this.swiper) {
      this.swiper.destroy();
      this.swiper = null;
    }
  },
};
</script>

<style>
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  background-color: #eee;
  text-align: center;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>