第一步：安装swiper：npm install swiper@3.4.1 --save-dev

完成之后，你会在项目的node_modules文件夹中多一个swiper文件夹。

第二步：引用组件

import Swiper from 'swiper';

import 'swiper/dist/css/swiper.min.css';

第三步：html中如何使用：

 <div class="swiper-container" style="width:372px;height:200px;">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://img01.hua.com/uploadpic/newpic/9010011.jpg" alt="" width="100%">
        </div>
        <div class="swiper-slide">
          <img src="https://img01.hua.com/uploadpic/newpic/201709151725388540.jpg" alt="" width="100%">
        </div>
        <div class="swiper-slide">
          <img src="https://img01.hua.com/uploadpic/newpic/201709011117442888.jpg" alt="" width="100%">
        </div>
      </div>
    </div>

vue代码：

mounted(){
        var mySwiper = new Swiper('.swiper-container', {
          autoplay:3000,
          speed:300,
          loop:true,
          onClick: function(swiper){
            alert('你点了Swiper');
            alert(mySwiper.realIndex);     //当前索引
          }
        })
}