nuxt使用vue-awesome-swipe轮播

1.在plugins中定义一个vue-awesome-swipe.js

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

2.在nuxt.config.js中定义下使用

css: [

    '@/assets/css/reset.css',

    'swiper/dist/css/swiper.css',

  ]，

  plugins: [

    { src: "@/plugins/element-ui", ssr: true },

    { src: "@/plugins/vue-awesome-swiper", ssr: false }

  ],

3.在组件中使用

  <!-- swiper -->

              <div v-swiper:mySwiper="swiperOption">

                  <div class="swiper-wrapper">

                    <div class="swiper-slide" v-for="(banner) in noticeBanners" :key="banner.linkUrl">

                      <a :href="banner.linkUrl"><img :src="banner.pictureUrl" :alt="banner.description"></a>

                    </div>

                  </div>

                  <div class="swiper-pagination swiper-pagination-bullets"></div>

              </div>

swiperOption: {

          loop: true,

          slidesPerView: 'auto',

          centeredSlides: true,

          spaceBetween: 30,

          pagination: {

            el: '.swiper-pagination',

            dynamicBullets: true

          },

          on: {

            slideChange() {

              console.log('onSlideChangeEnd', this);

            },

            tap() {

              console.log('onTap', this);

            }

          }

        },

over