Nuxt使用vue-awesome-swiper的正确姿势

近日在开发Nuxt项目的时候，发现nuxt在使用vue-awesome-swiper插件时，总是因为出现各种报错而无法正常使用，加上网上搜到的所谓解决方法都解决不了——要么css路径错误，要么轮播图能显示却卡住根本不能用等等，令人相当无奈。（而且搜到的内容大部分都是复制粘贴别人的，千篇一律又无法解决问题，这种行为真该让人唾弃）。

经过本人总结，总算找到了正确的在Nuxt项目里正确使用vue-awesome-swiper的方法。

首先，安装vue-awesome-swiper：

//只要安装这一个插件就可以了，不需要再安装什么别的swiper等插件。（注意版本号，别的版本可能出现css地址错误）
cnpm i vue-awesome-swiper@3.1.3 -S

第二步，在plugins文件夹下新建js文件，或者在原本就有的js文件里记载vue-awesome-swiper。

例如我创建的文件就是swiper.js，代码如下：

import VueAwesomeSwiper from 'vue-awesome-swiper'

//加载swiper
Vue.use(VueAwesomeSwiper)

之后，在nuxt.config.js文件里配置好css，以及申明加载vue-awesome-swiper的js文件。

代码如下：

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

到这里就已经可以在各页面里使用了。
代码如下：

//html代码
<div class="swiper">
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide
      v-for="(item, index) in swiperList"
      :key="index"
      :style="{backgroundImage: 'url('+item.imgUrl+')'}">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
    <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
  </swiper>
</div>

//js代码 -- swiperOptions
swiperOptions: {
  spaceBetween: 30,
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  autoplay: {
    delay: 5000,
  }
},

//swiperList代码
swiperList: [
  {
    imgUrl: require('~/assets/img/swiper1.jpg'),
  },
  {
    imgUrl: require('~/assets/img/swiper2.jpg'),
  },
  { 
    imgUrl: require('~/assets/img/swiper3.jpg'),
  }
]

//scss代码
<style lang="scss" scoped>
.swiper {
  width: 100%;

  .swiper-container {
    width: 100%;
    height: 785px;

    .swiper-slide {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .swiper-pagination{
      /deep/ .swiper-pagination-bullet{
        opacity: .5;

        &.swiper-pagination-bullet-active{
          background-color: rgba(255, 255, 255, 1) !important;
        }
      } 
    }
  }
}
<style>

SwiperOptions配置

请查看github的vue-awesome-swiper的官方示例：
https://github.surmon.me/vue-awesome-swiper/