Nuxt中使用vue-awesome-swiper小记

这两天尝试使用Nuxt搭建网站，里面用到了图片轮播，找到了vue-awesome-swiper，发现不同的版本还不一定都能用，找到了一个版本可以用的，记录一下使用方法。

一、安装（如果装不起来就用cnpm）

npm install vue-awesome-swiper@v3.1.3 --save

二、在plugins目录里面新建文件：swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)

三、在nuxt.config.js里面进行配置

plugins: [
    { src: '@/plugins/swiper', ssr: false }
],

四、使用

1.template里面（参考）

<!-- 轮播图 -->
    <div class="swiper" v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" :key="banner" v-for="banner in banners">
          <img :src="banner" />
        </div>
      </div>
      <div class="swiper-button-prev prev-btn"></div>
      <div class="swiper-button-next next-btn"></div>
    </div>
    <!-- 轮播图 -->

2.data里面（参考）

data() {
    return {
      //选项配置
      swiperOption: {
        //自动轮播
        autoplay: true,
        //无限循环
        loop: true,
        //每页显示几张图
        slidesPerView: 1,
        //每张图之间的间隔
        spaceBetween: 0,
        //左右点击
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      banners: [
        'https://t7.baidu.com/it/u=4277577705,3179553937&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=1831997705,836992814&fm=193&f=GIF'
      ],
    }
},

3.css样式（参考）

.swiper {
    width: 100%;
    height: 600px;
    .swiper-slide {
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
}

五、效果