nuxt.js使用swiper5+

1. 下載：npm install swiper --save

2. 再nuxt.config.js引入swiper.css：

module.exports = {
  css: [
    "assets/css/reset.css",
    'node_modules/swiper/css/swiper.css'  
  ],
}

3. 組件中使用：

<template>
  <div class="home">
    <div class="swiper-wrap">
      <div class="swiper-container">
          <div class="swiper-wrapper wh">
              <div class="swiper-slide">Slide 1</div>
              <div class="swiper-slide">Slide 2</div>
              <div class="swiper-slide">Slide 3</div>
          </div>
          <!-- 如果需要分頁器 -->
          <div class="swiper-pagination"></div>
          
          <!-- 如果需要導航按鈕 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
      </div>
    </div>
    <div class="main-wrap"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  components: {
    
  },
  data(){
    return{
      mySwiper:null
    }
  },
  mounted(){
    this.init()
  },
  methods:{
    init(){
      this.initSwiper()
    },  
    initSwiper(){
      this.$nextTick(()=>{
        this.mySwiper = new Swiper('.swiper-container',{
          direction: 'horizontal', 
          loop: true, // 循環模式選項
          
          // 如果需要分頁器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前進後退按鈕
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      })
    }
  }
}
</script>

<style  lang="less" scoped>
.home{
  .swiper-wrap{
    .swiper-container{
      width: 100%;
      height: 600px;
    }
  }
}
</style>