vue-swiper如何使用-创新互联

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

你所需要的网站建设服务,我们均能行业靠前的水平为你提供.标准是产品质量的保证,主要从事成都网站建设、网站制作、企业网站建设、成都手机网站制作、网页设计、品牌网站制作、网页制作、做网站、建网站。创新互联公司拥有实力坚强的技术研发团队及素养的视觉设计专才。

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://myzitong.com/article/djpcjs.html