【GitHub教程】 在GitHub中安装轮播图插件并使用：

在GitHub中引入轮播图插件并使用：

效果图如下：

1. 首先去GitHub寻找swiper轮播图插件：

https://github.com //地址

2. 点击进去查看使用说明：

3. 这里我们介绍如何安装使用它：

在cmd命令行进入项目目录输入下面内容安装 ：
npm install vue-awesome-swiper --save

package.json文件内的dependencies里显示有vue-awesome-swiper的版本表示成功

4. 在main.js文件内引入并使用它：

5. 使用之后在所有vue页面就可以直接使用：

这是GitHub上的使用说明

下面是我的使用方法：

<template>
  <div class="swiper">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide>
      <!-- 网络图片 -->
        <img class='swiper-img' src="http://img1.qunarzz.com/piao/fusion/1706/b8/a8e8ff02b094c802.jpg_750x200_ddaec8e5.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img class='swiper-img' src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/87a224d0349d94a11e97f31aa1aba4f5.jpg_750x200_1f78af87.jpg" alt="">
      </swiper-slide>
      <!-- 轮播图下方的分页小圆点 -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    name:"HomeSwiper",
    data() {
      return {
        swiperOption: {
          pagination: { //配置轮播图的分页器
            el: '.swiper-pagination'  //小圆点的类名
          }
        }
      }
    }
  }
</script>

<!-- 设置css可使用stylus插件写法 -->
<!-- >>>穿透：因为动态轮播还有的样式在swiper插件内显示 -->
<style lang="stylus" scoped>
.swiper >>> .swiper-pagination-bullet-active
    background-color:#fff
.swiper
  height:2.19rem
  .swiper-container
    height:100%
    .swiper-img
      width:100%
</style>

完成后运行就和上面效果图一致！

安装使用vue脚手架请点击这里