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放置的开发的具体功能，测试没问题后再跟主分支合并 -》项目完成
