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

网站建设知识