在Vue中使用Swiper轮播图

swiper官网API接口文档
swiper官网中给出的＂在vue中使用swiper教程＂
第一步：
在项目文件夹中用＂shift＋鼠标右键＂召唤出命令行工具，然后输入：npm install vue-awesome-swiper --save，安装好vue中使用过的swiper
第二步：
在main.js文件中全局引入:

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 同时必须引入css样式文件
import 'swiper/dist/css/swiper.css'

// 挂载到vue全局上
Vue.use(VueAwesomeSwiper)

或者只想单独在某个组件中引入:

// 同样引入样式文件
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

第三步:
使用swiper:

<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- 轮播块 -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- 一些控制组件 -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          loop: true,// true循环轮播;false不循环轮播
          autoplay: true,// true自动播放;false不自动播放
          pagination: {
            el: ".swiper-pagination",// 分页器
          }
          // 其他的所有的参数同 swiper 官方 api 参数
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>