(2020)nuxt.js使用swiper

正常 配置swiper：

1： 安装  vue-awesome-swiper --save （我的版本 4.1.1）

npm install vue-awesome-swiper --save

2: 安装swiper , 重点来了（截止今日，我安装的最新到了6.5，但是兄弟们，千万不要安装6以上，坑的一批，版本不配套 = =）

npm install swiper@5.2.0 --save

3：Plugin 里配置js

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

4：Nuxt.config.js 里配置css （如果非要用最新版的，这里的css文件位置会变化，具体去 node_module 的swiper里找就行了 ）

css: [
        {
            src: 'swiper/css/swiper.css'
        }
    ]

5：nuxt 组件内使用 (以下代码来自于 https://www.npmjs.com/package/vue-awesome-swiper)

<template>
  <div 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-pagination"></div>
  </div>
</template>
 
<script>
  export default {
    data () {
      return {
        banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          // ...
        }
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.mySwiper)
      this.mySwiper.slideTo(3, 1000, false)
    }
  }
</script>