vue使用swiper

我用的vue:2.6.11版本。
网上搜到很多文章，全是坑，看着非常简单，但是实际项目中，引入后项目启动就报错，

安装

指定版本安装，安装高版本直接报错

npm install swiper@3.2.0 --save -dev
npm install --save vue-awesome-swiper@3.1.3

引入

在组件页面或者当前使用的页面引入，如果全部页面都使用swiper你就在main.js引入

import { Swiper } from "vue-awesome-swiper";
import 'swiper/dist/css/swiper.css'

代码：
html:

       <div class="mainLtop">
         <div class="swiper-container swiper-no-swiping">
           <div class="swiper-wrapper">
             <div class="swiper-slide" v-for="item of swiperList" :key="item.index" >
               <div class="clearFix"><img :src="item.imgUrl" /></div>
               <p>{{item.txt}}</p>
             </div>
           </div>
           <!-- 分页符 -->
           <div class="swiper-pagination"></div>
           <!-- 前进后退按钮 -->
           <div class="swiper-button-prev"></div>
           <div class="swiper-button-next"></div>
         </div>
       </div>
       <ul class="mainLBtm">
         <li v-for="item of swiperList" :key="item.index" @click="L(item.id)">
           <h1>{{item.title}}</h1>
           <span></span>
         </li>
       </ul>
     </div>

方法

  mounted(){
    this.mySwiper=  new Swiper('.swiper-container', {
      autoplay: true,    //自动播放
      loop: true,        //循环播放w
      delay: 3000,       //每张图间隔三秒
      //分页器
      pagination: {
        el: ".swiper-pagination"
      },
      //左右前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  },
  methods: {
    L: function(i) {
      let that = this
      that.mySwiper.slideTo(i,1000)
    },
  }

o了！！！！