在前端開發中，經常需要在首頁實現輪播圖
本文將以win平臺為例，詳細介紹在vue專案中引入並使用vue-awesome-swiper外掛的一般流程

一、安裝 vue-awesome-swiper 庫

參照 vue-awesome-swiper 的官方文件
在vue專案的根目錄下開啟git bash
通過如下命令 全域性安裝vue-swesome-swiper庫

//安裝最新版本  
npm install vue-awesome-swiper --save  

//安裝舊版本  
npm install [email protected] --save

在main.js頭部分別新增下列語句

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

二、基礎使用指南

輪播圖的基礎結構：

<template>
  <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <!-- Optional controls -->
    <!-- pagination 即底部頁碼 -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <!-- button-prev 即跳轉到前一項的按鈕 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <!-- button-next 即跳轉到後一項的按鈕 -->
    <div class="swiper-button-next" slot="button-next"></div>
    <!-- scrollbar 即底部滾動條 -->
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>
 

設定相關的配置項：

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination', //引入輪播圖頁碼
        loop: true //啟用前後迴圈（最後一項左滑進入第一項）
      }
    }
  }
}
</script>

其他配置項請參考 vue-awesome-swiper 的官方文件