前言：vue有許多開源組件提供使用，其中awesome-swiper組件就可以非常方便的創(chuàng)建各式各樣的輪播圖，下面來看看如何使用這個(gè)組件。

注：此文檔為2018年撰寫，不適用于最新版swiper

一、關(guān)于vue-awesome-swiper組件

一個(gè)開源的輪播圖組件，github地址及官網(wǎng)見下，關(guān)于安裝步驟及使用都介紹得十分清楚。

github地址：https://github.com/surmon-china/vue-awesome-swiper

官網(wǎng)：https://www.swiper.com.cn/api/index.html

二、在項(xiàng)目中使用awesome-swiper

1、安裝依賴

npm install vue-awesome-swiper --save

2、引入awesome-swiper

支持全局引入和在組件中引入2種方式，如果項(xiàng)目中只有一個(gè)輪播的話推薦在組件中引入，有多個(gè)輪播則推薦在全局中引入。

（1）全局引入方式，在main.js中添加以下代碼

（2）組件中引入，在需要引入輪播圖的.vue文件中添加以下代碼

3、組件內(nèi)調(diào)用輪播圖

支持SPA(single page web application，單頁Web應(yīng)用）和SSR（Server Side Rendering，服務(wù)端渲染）2種模式，SPA通過ref屬性來查找swiper實(shí)例，而SSR借助命令參數(shù)查找swiper實(shí)例，在使用方面2種模式都是一樣的。

（1）SPA模式

HTML結(jié)構(gòu)見下，分頁器、向左向右滾動(dòng)按鈕、滾動(dòng)條等都是可選的，如不需要注釋掉即可

script中關(guān)于輪播圖的設(shè)置見下，更多的API可以看這里：http://www.swiper.com.cn/api/index2.html

效果見下

（2）SSR模式