vue3 vue-awesome-swiper使用

以下是在Vue3中使用vue-awesome-swiper的步骤：

1. 安装swiper和vue-awesome-swiper

npm install swiper vue-awesome-swiper --save

2. 在main.js中引入swiper和vue-awesome-swiper

import { createApp } from 'vue'
import App from './App.vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

const app = createApp(App)
app.use(VueAwesomeSwiper)
app.mount('#app')

3. 在组件中使用vue-awesome-swiper

<template>
  <swiper :options="swiperOption">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  }
}
</script>

在上面的代码中，我们首先在data中定义了一个swiperOption对象，用于配置swiper的选项。然后在模板中使用swiper组件，并将swiperOption对象传递给options属性。最后，在swiper-slide标签中添加轮播图的内容。