下面要来写，首页的轮播图组件了。
因为是新功能，因此，要在码云上新建一个分支。如下。
线下，我们要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 分支)
效果：
