vue-swipe轮播图的安装使用

1.安装轮播图依赖

npm i vue-swipe

2.在main.js中导入模块,注册全局

require('vue-swipe/dist/vue-swipe.css');
import { Swipe, SwipeItem } from 'vue-swipe';

Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);

3.在需要的vue文件中引用,例子如下:

<swipe class="my-swipe">
  <swipe-item class="slide1"></swipe-item>
  <swipe-item class="slide2"></swipe-item>
  <swipe-item class="slide3"></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;
}

推荐一个好用的网站(npm官网): https://www.npmjs.com/
你所有想要下载的vue依赖包都可以从这里找命令.
我一般都是在vue项目中需要使用js原生插件的时候,先来这里看看有没有依赖包可以下载,有命令当然就说明是可以简单化的使用.官网有介绍使用方法.