Swiper在Vue中的使用

1. 安装Swiper插件

npm install vue-awesome-swiper --save

2. main.js中引入swiper.css与vue-awesome-swiper全局注册

require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3. 在组件中使用

<template>
  <div class="my-slide">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiperSlide>slide 1</swiperSlide>
      <swiperSlide>slide 2</swiperSlide>
      <swiperSlide>slide 3</swiperSlide>
      <swiperSlide>slide 4</swiperSlide>
      <swiperSlide>slide 5</swiperSlide>
    </swiper>
  </div>
</template>

<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  components:{
    swiper,
    swiperSlide
  },
  data(){
    return{
      swiperOption:{
        //Swiper的配置选项、方法、函数
      }
    }
  }
</script>