vue-awesome-swiper 插件安装与使用

一 首先讲下安装：
通过npm安装: npm install vue-awesome-swiper --save

二 在vue项目中找到main.js添加：
import ‘swiper/dist/css/swiper.css’ //这里注意具体看使用的版本是否需要引入样式，以及具体位置。
//（如果使用的是2.6.0以上的版本需要自己手动去加载css）
import VueAwesomeSwiper from ‘vue-awesome-swiper’
Vue.use(VueAwesomeSwiper)

然后就直接贴代码负责上去就可以使用了

<template>
  <div class="scroll">
    <swiper :options="swiperOption">
      <swiper-slide>1</swiper-slide>
      <swiper-slide>2</swiper-slide>
      <swiper-slide>3</swiper-slide>
      <swiper-slide>4</swiper-slide>
      <swiper-slide>5</swiper-slide>
      <swiper-slide>6</swiper-slide>
    </swiper>
    <!--以下看需要添加-->
    <div class="swiper-scrollbar"></div> <!-- 滚动条 -->
    <div class="swiper-button-next"></div> <!-- 下一项 -->
    <div class="swiper-button-prev"></div> <!-- 上一项 -->
    <div class="swiper-pagination"></div> <!-- 标页码 -->
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'  
export default {
  name: 'HelloWorld',
  data() {
  	return {
  		swiperOption:{
			autoplay: {
				delay: 1000, //自动切换的时间间隔，单位ms
				stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
				stopOnLastSlide: false, //如果设置为true，当切换到最后一个slide时停止自动切换。
				disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。
				waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
		    },
			 //左右点击
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			//分页器设置         
			pagination: {
				el: '.swiper-pagination',
				clickable :true
			}
		}
  	}
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>   这里不可以加上scoped 否则无效
/* 重写标页码样式 */
	.swiper-pagination .swiper-pagination-bullet{
		display: inline-block;
		margin: 0 0.05rem;
	}
	/* 重写标页码选中时样式 */
	.swiper-pagination-bullet-active{
		background: #FFBE00; 
		opacity: 1;
	}
</style>