vue-awesome-swiper的用法

要使用Vue-awesome-swiper，需要先安装和引入该组件。可以通过npm安装：

npm install vue-awesome-swiper --save

或者通过CDN引入：

<link rel="stylesheet" href="//unpkg.com/swiper/css/swiper.css">
<script src="//unpkg.com/swiper/js/swiper.js"></script>

然后在Vue组件中使用：

<template>
  <div class="swiper">
    <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>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

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

在这个例子中，我们引入了Vue-awesome-swiper的两个组件Swiper和SwiperSlide，并在组件中使用Swiper组件。我们定义了一个swiperOption对象，其中包含了Swiper的配置选项，如循环、自动播放和分页器等。在模板中，我们将SwiperSlide组件作为Swiper组件的子组件，以创建Swiper的每个滑块。

需要特别注意的是，Vue-awesome-swiper会自动引入Swiper的CSS和JavaScript文件，因此不需要再手动引入。