最近写vue2.0项目中用到了轮播图的一个插件，也就是vue-awesome-swiper，个人感觉还是比较强大的，swiper官网中的API及配置均可使用(支持3.0)，以下说下使用该插件的一些步骤：

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)

然后就可以在组件中使用该插件

<template> <div> <swiper :options="swiperOption" ref="mySwiper"> <!-- 这部分放你要渲染的那些内容 --> <swiper-slide v-for="item in items"> </swiper-slide> <!-- 这是轮播的小圆点 --> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }, data() { return { swiperOption: { //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true notNextTick: true, pagination: '.swiper-pagination', slidesPerView: 'auto', centeredSlides: true, paginationClickable: true, spaceBetween: 30, onSlideChangeEnd: swiper => { //这个位置放swiper的回调方法 this.page = swiper.realIndex+1; this.index = swiper.realIndex; } } } }, //定义这个sweiper对象 computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted () { //这边就可以使用swiper这个对象去使用swiper官网中的那些方法 this.swiper.slideTo(0, 0, false); } } </script> <style> </style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。