vue怎样使用swiper插件

1：安装 ：

npm install vue-awesome-swiper --save

使用（局部使用，未全局注册）

import { swiper, swiperSlide } from "vue-awesome-swiper";//引入所需的组件
import "swiper/swiper-bundle.css";//引入样式

注册组件

components: {
    swiper,
    swiperSlide,
  }

使用模板：

<template>
  <div class="wrapper">
    <swiper ref="mySwiper" v-bind:options="swiperOptions">
      <swiper-slide v-for="(item, index) in 5" v-bind:key="index">
          {{item}}
      </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>
    </swiper>
  </div>
</template>

data数据：

data() {
    return {
      swiperOptions: {
        loop: true, 
        speed: 2000,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },

样式：

.swiper-container {
        background: #f00;
   }
.swiper-slide {
        height: 150px;
   }