vue 一个简单的项目 之一 首页 step3

下面要来写，首页的轮播图组件了。

因为是新功能，因此，要在码云上新建一个分支。如下。

线下，我们要pull 以下，将分支拉到本地。

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

    

    

转换当前分支，命令 ： git checkout index-swiper 即可。

下面，进行开发了。

启动服务，npm run start .

然后，下载一个轮播图插件，vue-awesome-swiper . 去GitHub 上，找到它.

在 github 这个插件的readme 中，显示，下载：

这儿，我们下载之前的版本，官网也给出了 2.6.7 版本的信息。

使用命名 npm install vue-awesome-swiper@2.6.7 --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 分支)

效果：