vue项目中如何使用swiper插件？

方法一、

一、下载swiper

//使用命令行下载
npm  install swiper

二、引入swiper
在需要的地方引入swiper以及swiper.min.css

<template>
	<div class="swiper-container h-banner">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="banners in banner">
				<img v-bind:src="banners.href" />
			</div>
		</div>
		<div class="swiper-button swiper-button-prev"></div>
		<div class="swiper-button swiper-button-next"></div>
	</div>
</template>
<script>
import Swiper from 'swiper';
import '../assets/css/swiper.min.css';
export default {
	data() {
		return {
			banner:[
				{title:"banner1",href: require("../assets/image/banner1.jpg")},
				{title:"banner2",href:require("../assets/image/banner2.jpg")}
			]
	  	}
	},
	methods: {
	
	},
	created() {
		var that = this;
		that.$nextTick(function(){
			var mySwiper = new Swiper(".swiper-container",{ 
				autoplay: true,
				effect: 'fade',
		　　	direction:"horizontal", /*横向滑动*/ 
		　　	loop:true,              //形成环路（即：可以从最后一张图跳转到第一张图  
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				} 
			});
		})
	}
}
</script>

方法二、

一、下载vue-awesome-swiper

npm install swiper vue-awesome-swiper --save-div

二、main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

三、在需要的地方引入

<template>
	<swiper ref="mySwiper" :options="swiperOptions">
		    <swiper-slide class="swiper-slide" v-for="banners in banner">
		    	<img v-bind:src="banners.href" />
		    </swiper-slide>
		    <!--<div class="swiper-pagination" slot="pagination"></div>-->
		    <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
      		<div class="swiper-button-next swiper-button-black" slot="button-next"></div>
		</swiper>
	</template>
<script>
	import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
	import '../assets/css/swiper.min.css';
	export default {
		props:{
			ishidden: ''
		},
	  	data() {
	  		return {
				banner:[
					{title:"banner1",href: require("../assets/image/banner1.jpg")},
					{title:"banner2",href:require("../assets/image/banner2.jpg")}
				],
				swiperOptions: {  
			        notNextTick: true,
			        //循环
			        loop:true,
			        //设定初始化时slide的索引
			        initialSlide:0,
			        //自动播放
			        autoplay:true,
			        // 设置轮播
			        effect : 'fade',
			        //滑动速度
			        speed:800,
			        //滑动方向
			        direction : 'horizontal',
			        //小手掌抓取滑动
			        // grabCursor : true,
			        //左右点击
			        navigation: {
			            nextEl: '.swiper-button-next',
			            prevEl: '.swiper-button-prev',
			        },
			        //分页器设置         
			        pagination: {
			            el: '.swiper-pagination',
			            clickable :true
			        }
			    },
			    swiperSlides: [1, 2, 3, 4]
			}
		},
		methods: {

		},
		created() { 

		},
		components: {
	  		Swiper,SwiperSlide
	  	}
	}
</script>
 

注：使用途中出现了一个警告（但不影响运行）：

错误出现的地方：

import Swiper from 'swiper';
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'