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 } }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')
以上是“vue-swiper如何使用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文名称:vue-swiper如何使用
文章出自:http://pwwzsj.com/article/pjdedh.html