如何在vue项目中引入swiper

项目中有一个横向滚动的需求，用到了swiper，看看如何实现它。
1.首先在页面中引入swiper

	import Swiper from "swiper"

2.在css中引入

@import "../../node_modules/swiper/dist/css/swiper.css";
	.swiper-container{
	height: 80px;
	padding-left: 56px;
	background-image: -webkit-radial-gradient(23% 100%, #2e79c3 0%, #297bc4 100%);
}
.swiper-slide{
	width: auto!important;
	display: inline-block;
	margin-right: 40px;
	height: 80px;
	line-height: 80px;
	font-size: 32px;
	padding: 0 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	cursor: pointer;
}
	.swiper-container .swiper-slide .active {
		color: #666;
		background-color: #fff8eb;
		box-shadow: 0 3px 13px 0 rgba(94, 94, 94, 0.50);
	}

3. 加入html

 <div class="swiper-container" ref="slider">
		  <div class="swiper-wrapper">
			  <div class="swiper-slide">Slide 1</div>
			  <div class="swiper-slide">Slide 2</div>
			  <div class="swiper-slide">Slide 3</div>
			  <div class="swiper-slide">Slide 4</div>
			  <div class="swiper-slide">Slide 5</div>
		  </div>
	  </div>

4.一定要在 mounted 里面引入方法

	var swiper = new Swiper('.swiper-container', {
				slidesPerView: 5,
				freeMode: true,
				loop:false
			});

一番操作后就可以在实现一个横向滚动功能~