vue-swipe轮播图

一、安装饿了么团队开发的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