vue引入swiper

[Wscats]

swiper

npm install swiper

在项目组件中引入swiper模块

import 'swiper';//注意这里只是引入swiper.js
import '../node_modules/swiper/dist/css/swiper.css'//还要单独引入样式，找到node_modules单独把样式引进来

轮播图组件 而初始化的代码和配置参数放进mounted () {}函数里面即可

<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="../public/images/wscats.jpg" /></div>
			<div class="swiper-slide"><img src="../public/images/wscats.jpg" /></div>
			<div class="swiper-slide"><img src="../public/images/wscats.jpg" /></div>
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination"></div>
	</div>
</template>
<script>
	import 'swiper';
	import '../node_modules/swiper/dist/css/swiper.css'
	export default {
		data() {
			return {
				
			}
		},
		mounted() {
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				paginationClickable: true
			});
		}
	}
</script>
<style>
	.swiper-container {
		width: 100%;
		height: 100%;
	}
	
	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.swiper-slide img {
		width: 100%;
		height: 200px;
	}
</style>

vue-awesome-swiper

vue-awesome-swiper DEMO