1.创建分支

在git上创建分支-index-swipper用于首页轮播图的制作，此时github项目上有两个分支，分别是 main和index-swipper，但是本地仓库还没有创建分支，就需要使用给i他命令把远程仓库中内容拉取过来。
*除了分支名字swipper拼错了 后面都是swiper

git pull
git checkout index-swipper //切换到swipper分支上 
git status //查看当前所在分支

2.使用插件制作轮播图

npm install vue-awesome-swiper@2.6.7 --save

3.页面抖动问题

在调试工具处把network设置为fast3G后刷新页面，发现在图片还没加载出来之前test已经跑到了上部，这在网速不好的时候出现很明显的抖动感
【我测试的时候没有出现抖动 切换成slow3G也没有出现（？） 但还是简单学习一下处理方法】

抖动.png

写法一：在轮播图的外面用wrapper的class包裹起来，设置它的宽度为100%，高度为0，padding-bottom为55%会自动撑开（与width相比）的55%的高度。它不能写在height里，写在height里表示对应父级元素的55%。

.wrapper
    width: 100%
    height: 0
    overflow: hidden
    //图片的宽高比是55%  设置后会自动撑开55%的距离 
    padding-bottom: 55%
    background: #ccc //在图片没有显示出来前加一个灰色背景

写法二：

.wrapper
    width: 100%
    height: 55%vw //兼容性不好

4.scoped局限下的穿透【？不懂】

scoped模式只能改变当前组件里的样式 （？）
wrapper下的所有swiper-pagination-bullet颜色都设置成白色。

.wrapper >>> .swiper-pagination-bullet
    background: #fff !important 

5.分支合并

git add .
git commit -m "add swiper"
git push  //push到index-swipper分支 
git checkout main //先切换到main分支上
git merge origin/index-swipper //把main分支和index-swipper 分支合并
git push  //把main推到线上

此时index-swipper放置的开发的具体功能，测试没问题后再跟主分支合并 -》项目完成