小編給大家分享一下vue-swiper如何使用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標(biāo)準(zhǔn)是產(chǎn)品質(zhì)量的保證，主要從事成都網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)網(wǎng)站建設(shè)、成都手機(jī)網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、品牌網(wǎng)站制作、網(wǎng)頁制作、做網(wǎng)站、建網(wǎng)站。創(chuàng)新互聯(lián)公司擁有實(shí)力堅(jiān)強(qiáng)的技術(shù)研發(fā)團(tuán)隊(duì)及素養(yǎng)的視覺設(shè)計(jì)專才。

swiper是我之前做前端頁面會用到的一個插件,我自己認(rèn)為是非常好用的。swiper提供了形式多種多樣、適應(yīng)各個終端的輪播圖效果。

我們先下載包，然后去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')

　　兩者都可以達(dá)到目的，然后再mian.js里面全局注冊

Vue.use(VueAwesomeSwiper)

　　在模板里使用

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
 components: {
  swiper,
  swiperSlide
 }
} 

　　這樣就可以使用啦

<-----------------------補(bǔ)充時(shí)間2017/9/22 21:00------------------------>

平時(shí)沒怎么用這個插件，今天看了下，發(fā)現(xiàn)有點(diǎn)小小的改動，可能導(dǎo)致之前的受到影響，npm包發(fā)布者的原話是

// 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如何使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：vue-swiper如何使用-創(chuàng)新互聯(lián)
URL分享：http://weahome.cn/article/djpcjs.html