安装:利用vue-cli这个工具创建一个vue项目,然后在项目中安装这个插件,详细方式可见官网,我用的是npm安装
npm install vue-awesome-swiper --save
引入这个插件:一般情况下可能多个页面要使用到轮播图,就全局引入这个插件,当然如果只需要局部用这个插件可以局部引用。我使用的是全局引用。
在main.js文件中添加下面三句(即引入了这个轮播插件):
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
然后就可以利用这个插件写轮播组件了,下面是一个整的样子,自己可根据需求进行适当的删减
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<!-- Optional c