1 工程级别git协作（一）拉取、切换分支

工程级别，每开发一个新功能，需要创建一个新分支，在新分支上开发，再合并到主分支上。

gitee中创建新的分支 index-wiper
拉取gitee新分支到本地
```
git pull
```
本地切换分支
```
git checkout XXXX
```
查看分支状态
```
git status
```

2 首页Swiper轮播图制作

2.1 安装swiper插件

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

2.2 导入swiper插件

参考插件文档说明和API

github.com/surmon-chin…

2.3 防止抖动

设置一个div盒子包含轮播图，大小为轮播图的大小。已知轮播图的长宽比为375：150

width: 100%设置好后，两种思路：

设置padding
```
overflow: hidden
width: 100%
height: 0
padding-bottom: 40%
background-color: #ccc
```
- 设置overflow: hidden，当div设置了宽高，div里的内容如果超出了宽高就会被隐藏。
- padding百分比特点：padding的百分比是相对于父元素宽度

设置height

width: 100%
height: 40vw
background-color: #ccc

vw 有些浏览器可能有兼容问题

2.4 样式穿透

  .wrapper >>> .swiper-pagination-bullet-active
    background: red !important

这样样式就不受scoped的限制了。

2.5 优化：v-for列表循环

vue是数据驱动的框架
将简单的swiper-slide罗列改成v-for列表循环

2.6 组件API

循环轮播左右都可以切换，loop: true
slot：若想要组件的一部分内容被父组件定制，采用slot形式向组件里传递可以被定制的内容。

2.7 实现

<template>
    <div class="wrapper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="item of swiperList" :key="item.id">
            <img class="swiper-img" :src="item.imgUrl">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },
      swiperList: [{
        id: '001',
        imgUrl: '//m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/218301/37/11405/200116/62023322E4ee811e0/7baafe9b22947f15.jpg!cr_1053x420_4_0!q70.jpg'
      }, {
        id: '002',
        imgUrl: '//m15.360buyimg.com/mobilecms/jfs/t1/219514/21/12064/89260/6200b656E63c6aca2/b590affc03fad114.jpg!cr_1053x420_4_0!q70.jpg'
      }, {
        id: '003',
        imgUrl: '//m15.360buyimg.com/mobilecms/jfs/t1/101054/24/21142/138548/6200edb7E67088543/d597ddc80e14e94b.jpg!cr_1053x420_4_0!q70.jpg'
      }]
    }
  }
}
</script>
<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background: #fff !important
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 40%
    background-color: #ccc
    .swiper-img
        width: 100%
</style>

3 工程级别git协作（二）提交、合并分支

本地index-wiper分支->线上index-wiper分支

git add .
git commit -m "XX"
git push

切换到main分支

git checkout main

将线上的index-wiper分支新增的内容合并到本地的main(或master)分支

 git merge origin/index-swiper

将main(或master)分支的内容提交到线上

git push

去哪儿APP vue 2.X —— 开发笔记（二）主页轮播图 git协作