在nuxt中使用vue-awesome-swiper

github上查看vue-awesome-swiper发现其使用的是swiper4：v3.1.3版本

 

1、安装vue-awesome-swiper

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

2、在plugins下新建vue-swiper.js文件

import Vue from 'vue'

if (process.browser) {
    const VueAwesomeSwiper = require("vue-awesome-swiper/dist/ssr");
    Vue.use(VueAwesomeSwiper);
}

3、在nuxt.config.js中引入

css:[
  { src: "swiper/dist/css/swiper.css" }
],
plugins:[
  { src: "~/plugins/vue-swiper.js", ssr: false },
]

4、在页面中使用举例

<section class="brand-list-box">
   <div class="swiper-bar-left cat-bar-left">
     <i class="iconfont iconleft">《</i>
   </div>
    <aside class="swiper-box"
     v-swiper:logoSwiper="logoOption"
     ref="mySwiper">
    <div class="swiper-wrapper">
       <div class="swiper-slide brand-list"><img src="~/assets/images/home/history6.jpg" alt=""></div>
       <div class="swiper-slide brand-list"><img src="~/assets/images/home/history5.jpg" alt=""></div>
       <div class="swiper-slide brand-list"><img src="~/assets/images/home/history4.jpg" alt=""></div>
       <div class="swiper-slide brand-list"><img src="~/assets/images/home/history3.jpg" alt=""><</div>
       <div class="swiper-slide brand-list"><img src="~/assets/images/home/history6.jpg" alt=""></div>
       <div class="swiper-slide brand-list"><img src="~/assets/images/home/history5.jpg" alt=""></div>
       <div class="swiper-slide brand-list"><img src="~/assets/images/home/history4.jpg" alt=""></div>
       <div class="swiper-slide brand-list"><img src="~/assets/images/home/history3.jpg" alt=""></div>
    </div>
    </aside>
   <div class="swiper-bar-right cat-bar-right">
     <i class="iconfont iconiconright">》</i>
   </div>
</section>  
//更改标签以swiper-

data() {
      return {
        logoOption: {
            slidesPerView: 4,
            //spaceBetween: 5,
            navigation: {
                nextEl: ".swiper-bar-right",
                prevEl: ".swiper-bar-left",
            },
        },
      }
    },

.brand-list-box {
  width: 100%;
  display: flex;
  cursor: pointer;
  position: relative;
  .cat-bar-left {
      width: 54px;
      text-align: center;
      position: absolute;
      bottom: 8px;
      left: -5px;
      z-index: 9999;
        i {
          font-size: 30px;
          color: #fff;
        }
  }
  .cat-bar-right {
     width: 54px;
     text-align: center;
     position: absolute;
     bottom: 8px;
     right: -5px;
     z-index: 9999;
       i {
          font-size: 30px;
          color: #fff;
       }
  }
  .swiper-box {
     width: calc(100%);
     .brand-list {
       justify-content: center;
       align-items: center;
       img {
          width: 100%;
          border: 1px dashed #999;
       }
     }
 }
 .swiper-button-disabled {
     opacity: 0.4;
 }
}

案例：https://github.surmon.me/vue-awesome-swiper/