写博客不是我的爱好,只是人脑毕竟空间只有那么大,有时候会忘了,好记性不如烂笔头,所以通过博客记录点点滴滴,以后可以翻出来看。
vue-awesome-swiper官网链接https://www.npmjs.com/package/vue-awesome-swiper
和上一篇随笔一样,我们先下载包,然后去main.js里面配置。
npm install vue-awesome-swiper --save
我们可以用import的方法
// import import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'
也可以用require
var Vue = require('vue')var VueAwesomeSwiper = require('vue-awesome-swiper')
两者都可以达到目的,然后再mian.js里面全局注册
Vue.use(VueAwesomeSwiper)
在模板里使用
import { swiper, swiperSlide } from 'vue-awesome-swiper'export default { components: { swiper, swiperSlide }}
I'm Slide 1 I'm Slide 2 I'm Slide 3 I'm Slide 4 I'm Slide 5 I'm Slide 6 I'm Slide 7 //
这样就可以使用啦
<-----------------------补充时间2017/9/22 21:00------------------------>
平时没怎么用这个插件,今天看了下,发现有点小小的改动,可能导致之前的受到影响,npm包发布者的原话是
// starting with version 2.6.0, you need to manually introduce swiper's css这句话的意思是:从版本2.6.0开始,您需要手动引入swiper的css
require('swiper/dist/css/swiper.css')
我写这篇随笔的时候,还是2.4.2版本,还没有更新到2.6.0版本,所以并没有什么样式上的问题,今天我更新了包试了一下之前写的,发现样式上出问题了。所以才去找的文档,在此补充,希望能帮到各位