nuxt.js使用swiper插件

先装swiper插件npm install --save vue-awesome-swiper

引入第三方插件一般放置到plugins目录下

创建swiper.js

 import Vue from 'vue'
import css from 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
export default () => {
Vue.use(VueAwesomeSwiper,{css})
}

接着在nuxt.config.js的plugins里配置

 plugins: [
    { src: "~/plugins/swiper.js", ssr: false }
  ],

页面上标签这样写

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

安装的swiper版本为4.1.1，swiper配置如下：

swiperOption: {
       pagination: '.swiper-pagination',
       paginationClickable: true,
       autoplay: 2000,
       speed: 1000,
       loop: true,
       observer: true,
       observeParents: true,
       autoplayDisableOnInteraction: false,
       nextButton: '.swiper-button-next',
       prevButton: '.swiper-button-prev'
     }