vue-swiper如何使用

小编给大家分享一下vue-swiper如何使用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联主营西和网站建设的网络公司,主营网站建设方案,成都App定制开发,西和h5微信小程序开发搭建,西和网站营销推广欢迎西和等地区企业咨询

swiper是我之前做前端页面会用到的一个插件,我自己认为是非常好用的。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
 }
} 



这样就可以使用啦

<-----------------------补充时间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')

以上是“vue-swiper如何使用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


文章标题:vue-swiper如何使用
路径分享:http://ybzwz.com/article/pjdedh.html