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

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

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

vue 一个简单的项目 之一 首页 step3_第1张图片

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

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

    

    

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

下面,进行开发了。

启动服务,npm run start .

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

在 github 这个插件的readme 中,显示,下载:

vue 一个简单的项目 之一 首页 step3_第2张图片

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

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

下载完成后。可以启动项目的服务了,然后就是引入这个插件。

因为很多页面都要用到,因此我们全局引入这个插件。

  vue 一个简单的项目 之一 首页 step3_第3张图片

     vue 一个简单的项目 之一 首页 step3_第4张图片

好了,下面就可以使用这个插件了。

首先,我们在pages/components 下创建一个文件 Swiper.vue

    vue 一个简单的项目 之一 首页 step3_第5张图片

  GitHub 上也给出了如何使用

    vue 一个简单的项目 之一 首页 step3_第6张图片

下面,在swiper.vue 中使用

    vue 一个简单的项目 之一 首页 step3_第7张图片

下一步,在home.vue 中使用这个组件。

    vue 一个简单的项目 之一 首页 step3_第8张图片

 下面给这个插件,添加图片。

    vue 一个简单的项目 之一 首页 step3_第9张图片

以上,似乎就好了,并没有。因为并没有指定轮播图的高度,因此在网速较慢时,网页显示可能会有一个竖直上的抖动(加载完轮播图后,的撑开效果)。以下,解决了这个问题。

    vue 一个简单的项目 之一 首页 step3_第10张图片

然后,配置下,显示轮播图的白色小点。

    vue 一个简单的项目 之一 首页 step3_第11张图片

样式的穿透,由于scoped , 插件内的样式,emmm 不太清楚... 方法是使用“>>>” 样式的穿透 使得 swiperdiv 类 下的所有 长名字的哪个类,样式都发生改变。

    vue 一个简单的项目 之一 首页 step3_第12张图片

下面,改进一下。

    vue 一个简单的项目 之一 首页 step3_第13张图片

最后,提交代码。

合并分支。

git push 之后。

git checkout master

git merge origin/index-swiper (将线上index-swiper 分支合并到本地当前master 分支)

git push (提交master 分支)

效果:

    vue 一个简单的项目 之一 首页 step3_第14张图片    

你可能感兴趣的:(vue,项目案例)