1.遵循一个功能就要用一个分支来完成，写完后合并到master上的原则 实现轮播图在新创建的分支index-swiper上完成
2.线上创建分支完成后 要将线上代码同步到本地
3.这个功能可以借助插件vue-awesome-swiper完成
- 安装 npm install [email protected] --save
- 引入
4.编写swiper.vue 模板如下，并在home.vue中引入该组件
Q：图片未加载时，高度为0 用户会有明显抖动感
A：在swiper最外层加div 根据图片宽高比设置padding-bottom高度31.25% 因为直接写在height上是相对父元素高度 这样就实现了图片自适应 也可以写height：31.25vm 但兼容上会出现问题，还是前者好
小知识点：在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度。
应用：进行提前占位，避免资源加载时候的闪烁，还可以让高度自适应。
Q：如何在图片下显示点？修改点的样式？
A：
- 显示点：通过填写配置项
- 修改点的样式：因为swiper是引用的第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped，使用样式穿透
Q：实现循环轮播 也就是首尾能衔接上
A：在swiperOption上加配置项
5.提交本地代码 合并index-swiper分支代码到master上
git add . git commit -m 'change' git push(index-swiper上的代码)
git checkout master(切换到master上) git merge origin/index-swiper(合并到master上) git push（master的代码）
注意：
data:function(){}在es6中写法 => data () {}
