下面要來寫，首頁的輪播圖元件了。

因為是新功能，因此，要在碼雲上新建一個分支。如下。

線下，我們要pull 以下，將分支拉到本地。

只需要，進入專案目錄。使用命令 git pull . 如下，即把index-swiper 分支拉到本地了。

轉換當前分支，命令 ： git checkout index-swiper 即可。

下面，進行開發了。

啟動服務，npm run start .

然後，下載一個輪播圖外掛，vue-awesome-swiper . 去GitHub 上，找到它.

在 github 這個外掛的readme 中，顯示，下載：

這兒，我們下載之前的版本，官網也給出了 2.6.7 版本的資訊。

使用命名 npm install [email protected] --save 即可。

下載完成後。可以啟動專案的服務了，然後就是引入這個外掛。

因為很多頁面都要用到，因此我們全域性引入這個外掛。

好了，下面就可以使用這個外掛了。

首先，我們在pages/components 下建立一個檔案 Swiper.vue

  GitHub 上也給出瞭如何使用

下面，在swiper.vue 中使用

下一步，在home.vue 中使用這個元件。

 下面給這個外掛，新增圖片。

以上，似乎就好了，並沒有。因為並沒有指定輪播圖的高度，因此在網速較慢時，網頁顯示可能會有一個豎直上的抖動（載入完輪播圖後，的撐開效果）。以下，解決了這個問題。

然後，配置下，顯示輪播圖的白色小點。

樣式的穿透，由於scoped , 外掛內的樣式，emmm 不太清楚... 方法是使用“>>>” 樣式的穿透 使得 swiperdiv 類 下的所有 長名字的哪個類，樣式都發生改變。

下面，改進一下。

最後，提交程式碼。

合併分支。

git push 之後。

git checkout master

git merge origin/index-swiper (將線上index-swiper 分支合併到本地當前master 分支)

git push (提交master 分支)

效果：