在前端圈裏，總有前仆後繼的仁人誌士相繼揮灑著熱汗（這裏沒有血），在我們小白需要用到兩個技術結合的時候，他們早已沖向前為我們殺出了一條路，準備好了實現用的技術和方案。有時候我就在想，我的理想大概就是站在自己現在仰望的代碼塔的頂峰，像他們一樣，不斷輸出自己的熱情和力量，產出一個可以為人所用的東西，以能夠為後來人發光發熱吧。

vue-awesome-swiper就是其中一個前輩們產出的結晶。就看首尾兩個單詞，就知道他是vue和swiper的愛情之子了。

先來仰望一波——>九點鐘方向。vue-awesome-swiper官網是中文文檔，媽媽再也不用擔心我讀api啦。“基於 Swiper4、適用於 Vue 的輪播組件”。在產品催著進度的緊張環境下，在四處搜尋解決方案的情況下，這句話簡直發著光啊。

具體怎麽用，官方文檔寫的很清楚，但我還是想記錄下來，好再普及一波。

一、天才第一步，這裏沒有紙尿褲（(⊙﹏⊙) 好像暴露了年齡...）

準備一個基於vue-cli的項目(或者你自己的腳手架，whatever),沒有準備的請移駕vue-cli教程：

https://www.cnblogs.com/padding1015/p/9092998.html

二、在項目目錄下，往node_modules裏安裝插件vue-awesome-swiper（可以在項目目錄內，shift+鼠標右鍵，選擇"在此處打開命令窗口"），

註釋：我這裏極速快三平臺出租【大神源碼論壇】dsluntan.com 【布丁源碼論壇】budingbbs.com 企娥3393756370window電腦安裝了，所有右鍵出現的可能和沒安裝的不一樣，實在找不到的看這一篇教程：gulp安裝流程、使用方法及CMD常用命令導覽

然後輸入下邊的安裝插件命令

npm i --s vue-awesome-swiper

三、第三步我們依舊沒有天才牌褲子，所以還是自己一步一步穩穩走。

1．插件安裝後就是引用插件了，main.js內部分三步走：

(1) 引用插件：mainjs註冊vas

(2) 註冊插件

註冊後未use控制臺就警告了

通過全局方法 Vue.use() 使用插件後可以了

使用後控制臺無錯了

(3) 插件樣式（也可以自己寫，不用人家的）

2．vue項目中使用：

(1) 準備-template

new a project準備一個空項目

初始化html-空結構

(2) 引入-import

(3) 註冊組件-components

(4) 配置-js（具體配置和swiper的一摸一樣，看swiper官網即可。我這裏只說下我本次使用的配置的含義）

swiper官網參數

（5）美化- css

wan~

效果：

代碼：

main.js

1

2

3

import VueAwesomeSwiper from ‘vue-awesome-swiper‘

import ‘swiper/dist/css/swiper.css‘

Vue.use(VueAwesomeSwiper)

zujian.vue

• View Code

2018-07-11 12:59:47　

個人學習理解和總結，很多不足還請指正~

vue-awesome-swiper極速快三平臺出租 - 基於vue實現h5滑動翻頁效果