vue使用轮播特效的插件

使用轮播特效的插件（npm中的包）

1、github上有保存，名为vue-awesome-swiper

https://github.com/surmon-china/vue-awesome-swiper

2、根据提示步骤按步进行

    2.1 命令行npm中安装 npm install vue-awesome-swiper@2.6.7 --save

    2.2 main.js中全局引入相关的组件和css，vue.use()使用这个插件

	import VueAwesomeSwiper from 'vue-awesome-swiper'
	import 'swiper/dist/css/swiper.css'
	Vue.use(VueAwesomeSwiper,)

    2.3在用到轮播特效的单文件组件中引用插件定义的模板:components\Swiper.vue

<template>
 <swiper :options="swiperOptions"> //有swiperOptions变量的绑定，需在子组件data里绑定
    <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>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default{
 name:'HomeSwiper',
 data(){
 return{
 swiperOptions:{}//绑定父组件变量swiperOptions
 }
 }
}
</script>

<style lang="stylus" scoped>

</style>

2.4在Home.vue中放入HomeSwiper组件

<template>
	<div>
		<home-header></home-header>
		<home-swiper></home-swiper>
	</div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
export default{
	name:'Home',
	components:{
		HomeHeader,
		HomeSwiper
	}
}
</script>

3.修改轮播图的信息和样式

<div class="wrapper">
		<swiper :options="swiperOptions">
	    <swiper-slide>
	    	<img class="swiper-img" src="https://img.zcool.cn/community/016d6560af0e1311013eaf705fcddf.jpg@1380w">
	    </swiper-slide>
	    <swiper-slide>
	    	<img class="swiper-img" src="https://img.zcool.cn/community/01486f60b04f5611013eaf70f5ed8a.jpg@1380w">
	    </swiper-slide>
	    <div class="swiper-pagination" slot="pagination"></div>
	  </swiper>
  </div>
  
<style scoped>
    .wrapper//防止加载图片过程中的内容抖动
        overflow hidden
        width:100%
        height:0
        padding-bottom:25.3%%//图片高:宽比例
        background:#eee
        .swiper-img
            width:100%
</style>