swiper vue2

在使用Vue2和Vue-Awesome-Swiper时，首先需要在swiper.vue文件中引入样式和组件。您可以在<template>标签中添加以下代码：

<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

然后，在<script>标签中，您需要引入Vue-Awesome-Swiper和Swiper组件，并定义swiperOption，包含循环、自动播放和分页的选项。

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

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

最后，您可以在<style>标签中添加样式（如果需要）。

<style lang="scss" scoped>
/* 样式代码 */
</style>

请记住，在主文件main.js中，您还需要引入Vue-Awesome-Swiper。您可以添加以下代码：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

这样，您就可以在Vue2中使用Vue-Awesome-Swiper来创建Swiper轮播组件了。注意，如果您使用的是Swiper3版本，请根据引用中的说明下载相应的版本，并相应地修改您的代码。