vue 使用 vue-awesome-swiper（swiper）解决方法

一、安装
npm install swiper vue-awesome-swiper@v3.2.0 --save

二、页面引入

*这里说明一下：完全不用在main.js写那些没用的，仅需要当前组件或者页面引入一下就行

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

三、详细

         <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>

<script>
import { Swiper } from "vue-awesome-swiper";
import 'swiper/dist/css/swiper.css'
export default {
  name: 'index',
  data () {
    return {
      swiperList: [
        {
          id:"1",
          title:"###",
          imgUrl: require('../assets/images/1_03.jpg'),
          txt:"###"
        },
        {
          id:"2",
          title:"###",
          imgUrl: require('../assets/images/1_03.jpg'),
          txt:"###"
        },
     
      ],

    }
  },
  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"
      }
    });
   },
  }
 <script>

.mainCont .swiper-container{position: relative;width: 300px;height: 138px;overflow: hidden;}
.mainCont .swiper-container .swiper-slide{width:100%;height: 138px}
.mainCont .swiper-container .swiper-slide img{width: 100%;margin-bottom: 30px;float: left}
.mainCont .swiper-container .swiper-slide p{font-size: 42px;line-height: 66px;color: #333}