vue2中使用swiper插件制作輪播圖

Vue2中使用swiper、vue-awesome-swiper制作輪播圖

版本問題：

• 非常重要： 版本選錯了，運行會報各種bug，很惡心
• 最新版本的swiper6適合在vue3中使用，在vue2中使用會出現很多bug
• 這里使用的swiper和vue-awesome-swiper版本如下：

"vue-awesome-swiper": "^4.1.1",
 "swiper": "^5.4.5",

跟這個類似，vue中使用插件，導入依賴時候需要導入適合的版本，不然容易報錯
例如：vue2中使用element ui插件是可以的（"element-ui": "^2.15.5"），
而在vue3中使用elementui則應該導入（"element-plus"）,使用上面的element-ui會報錯
還有： 導入sass-loader和sass時候也要導入合適的版本：（ "sass": "^1.26.5", "sass-loader": "^8.0.2",）
下面記錄一下如何使用swiper制作輪播圖：
如下可以復制到組件中嘗試：

模板代碼

1. Home.vue

<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  export default {
    name: 'Home',
    title: 'Pagination',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOption: {
           spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
 .swiper {
  height: 300px;
  width: 100%;
  border: 1px transparent solid;

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    background-color: rgb(98, 168, 200);
  }
}
</style>

2. main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

結果圖：

總結：
在前端學習過程中，使用插件開發會遇到各種版本的問題，這種輪播圖用簡單的css就可以實現的，花時間去使用別人的組件是得不償失的，swipper這種復用性不高，之前使用的element ui可以幫助我們節省很多時間去設計樣式，對后端人員來說幫助很大。
js對前端學習的人來說非常重要，而且難度也是最大的。
之后我會對js一些難點做一些總結和歸納。