一、安装饿了么团队开发的vue专用的轮播图插件：vue-swipe
npm install vue-swipe
二、在index.js文件中引用vue-swipe
require('vue-swipe/dist/vue-swipe.css');
import { Swipe, SwipeItem } from 'vue-swipe';
三、在index.js中注册组件
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);
四、在需要使用的components下面的.vue页面中直接引用
<swipe class="my-swipe">
<swipe-item class="slide1">1</swipe-item>
<swipe-item class="slide2">2</swipe-item>
<swipe-item class="slide3">3</swipe-item>
</swipe>
需要写样式。样式例子：
.my-swipe {
height: 200px;
color: #fff;
font-size: 30px;
text-align: center;
}
.slide1 {
background-color: #0089dc;
color: #fff;
}
.slide2 {
background-color: #ffd705;
color: #000;
}
.slide3 {
background-color: #ff2d4b;
color: #fff;
}
vue-swipe的github地址：
https://github.com/ElemeFE/vue-swipe
