nuxt 如何引入swiper 插件

安装版本一：
npm install vue-awesome-swiper@3.1.3
npm install swiper@4.0.7

安装版本二：

npm install vue-awesome-swiper@4.0.0
npm install swiper@5.4.5

 

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper' //可以看到与上面版本的引入路径不同
import 'swiper/css/swiper.css' //可以看到与上面版本的引入路径不同

Vue.use(VueAwesomeSwiper)

module.exports = {
plugins: ['~/plugins/swiper.js']
}

<div v-swiper:mySwiper="swiperOption" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, idx) in special" :key="idx">
<img :src="item.picUrl" class="img1" />
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

 

special: [
{ picUrl: require("@/assets/img/banner1.png") },
{ picUrl: require("@/assets/img/banner2.png") },
],
swiperOption: {
loop: true,
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 30,
autoplay:true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'my-button-disabled',
},
on: {
slideChange() {
console.log("onSlideChangeEnd", this);
},
tap() {
console.log("onTap", this);
},
},
},

以上操作之后  如果还报错   就可能需要再安装   npm install --save vue-awesome-swiper