vue-awesome-swiper在前端交互效果中的应用十分广泛，那么我们要如何在nuxt.js中使用该组件呢？

我们先来看看最终效果如图：

本最终效果是将vue-awesome-swiper引入组件中使用，所以比常规直接在页面中应用多了一个步骤，即一共分为五步。

步骤一：安装vue-awesome-swiper插件

npm install swiper vue-awesome-swiper --save
# or
yarn add swiper vue-awesome-swiper

步骤二：在plugins下新建vue-awesome-swiper.js文件

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

步骤三：在nuxt.config.js中配置

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

步骤四：在components中创建一个swiperBanner.vue组件

<template>
   <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="banner in banners">
                  <img :src="banner.src">
              </div>
          </div>
          <div class="swiper-pagination swiper-pagination-bullets"></div>
    </div>
</template>

<script>
  export default {
      data(){
              return{
                  banners:[
                      {src:require("../../assets/img/20191022163942.jpg"),link:""},
                      {src:require("../../assets/img/20191022163942.jpg"),link:""},
                  ],
                  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);
                          }
                      }
                  }
              }
          },
    }
</script>

<style lang="scss">
  .swiperWrap{
      .swiper-slide{
          img{
              width:100%;
              height:100%;
          }
      }
  }
</style>

步骤五：组件在页面中的应用

<Banner></Banner>
#
components: {
  Banner
},
#
import Banner from '~/components/swiperBanner.vue'

以上便是关于在nuxt.js中使用swipter的完整步骤，事实上在nuxt中所有第三方插件使用步骤和这个方法一致，所以你其余插件也可以完全按照该步骤来安装。