技術標籤：移動端git元件化

開發功能

在真正的企業級開發中我們每開發一個功能是要建立一個git分支的，然後在分支上進行程式碼的開發，當

我們的程式碼開發完成會我們會把我們的程式碼合併到我們的master主分支上

這個時候本地是沒有這個index-swiper分支因為我們是在線上建的分支，所以我需要把線上的分支拉到本地來

// 使用git pull  這個時候git pull 就會幫我們把線上的index-swiper拉到我們的本地上來

// 接下來在執行一個 git checkout index-swiper

// 那現在就切換到了index-swiper分支
// 我們可以通過 git status 來檢視一下
 

那我們接下來開發都會在這個分支上

swiper

vue-awesome-swiper

這個外掛可以快速的幫我們構建一個輪播

使用

// npm install swiper vue-awesome-swiper --save
// 由於最新版本有一些問題這裡我們使用2.6.7
// 所以我們要在命令這樣改
npm install swiper vue-awesome-[email protected]2.6.7 --save
// 以上是外掛的安裝

// 那麼如何使用呢 因為我們各個頁面都可能會用到輪播功能 所以我們全域性引入 main.js
import VueAwesomeSwiper from
 
 'vue-awesome-swiper' //引入外掛 
import 'swiper/dist/css/swiper.css' // 你要使用這個外掛就要將他的css 也引入進來
Vue.use(VueAwesomeSwiper) // 最後你要通過Vue.use來使用這個外掛
// 這個時候我們就可以在專案中使用swiper外掛了

<template>
    <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide>
        <img class
 
="swiper-img" src="./a8014c086e061d958b139b4c7df40ad162d9ca69.jpg" />
    </swiper-slide>
    <swiper-slide>
        <img class="swiper-img" src="./c83d70cf3bc79f3dccde5a0ab8a1cd11728b29c8.jpg" />
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {}
    }
  }
}
</script>

<style lang="stylus" scoped>
    .swiper-img {
        width : 100%
        height : 3rem
    }
</style>

效果如下 這個是時候是有一點問題的你在swiper下新建一個div隨便寫點什麼，然後在Network中，在右上部有一個Online選擇改為Fast3G，也就是讓我們的網速變為3G，然後text會在圖片沒加載出來之前在圖片的位置顯示，出現明顯的抖動（建議測試一下）

// 解決方法在swiper外巢狀一個div 樣式如下
<template>
   <div class="wrapper">
        <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide>
            <img class="swiper-img" src="./a8014c086e061d958b139b4c7df40ad162d9ca69.jpg" />
        </swiper-slide>
        <swiper-slide>
            <img class="swiper-img" src="./c83d70cf3bc79f3dccde5a0ab8a1cd11728b29c8.jpg" />
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
   </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: { }
    }
  }
}
</script>

<style lang="stylus" scoped>
    .wrapper
      overflow：hidden
      width：100%
      height：0
      padding-bottom:31.25%
</style>

修改在設定scoped中的style引入元件的樣式

pagination: '.swiper-pagination' // 配置點 想要改顏色我們可以通過控制檯看他的class名是有什麼控制的 如果改了沒有用
// style lang="stylus" scoped 第一種    !important第二種
// 解決方案
<style lang="stylus" scoped> 
.wrapper >>>  .swiper-pagination-bullet-active
background: red !important
// 解釋 他指的是樣式穿透
</style>

一個swiper開寫好了

<template>
   <div class="wrapper">
        <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for="item of swiperList" :key="item.id">
            <img class="swiper-img" :src="item.imgUrl" />
        </swiper-slide>
        <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: '0001',
          imgUrl: 'static/Home-img/swiper-0001.jpg'
        },
        {
          id: '0002',
          imgUrl: 'static/Home-img/swiper-0002.jpg'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
    .wrapper >>>  .swiper-pagination-bullet-active
      background: #fff !important
    .wrapper
      overflow：hidden
      width：100%
      height：0
      padding-bottom:50%
      .swiper-pagination-bullet-active
        background: #fff !important
      .swiper-img
        width:100%
        height: 3rem
</style>

// 最後我們來總結一下git在實際工作中的操作
// 基本操作
git add .
git commit -m .備註.
git push
// 分支切換
git pull // 拉取分支
git checkout 分支名稱 //切換分支
// 分支提交合並
git add .
git commit -m ''
git push
git checkout master
git merge origin/要合併的分支名稱
git push

master上面放的是整個專案所有功能的最新程式碼
而index-swiper放置的是開發的具體功能