正常 配置swiper:

1: 安装  vue-awesome-swiper --save (我的版本 4.1.1)

text
1
npm install vue-awesome-swiper --save

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

text
1
npm install swiper@5.2.0 --save

3:Plugin 里配置js

text
1 2 3 4
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
Vue.use(VueAwesomeSwiper)

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

text
1 2 3 4 5
css: [
        {
            src: 'swiper/css/swiper.css'
        }
    ]

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

html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
<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>