使用vue-awesome-swiper插件制作轮播图

在前端开发中，经常需要在首页实现轮播图
本文将以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 vue-awesome-swiper@2.6.7 --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 的官方文档