小圖示區域的部分

首先開啟碼雲建立新分支

點選分支，分支名字為 index-icons,然後需要把線上的分支拿到本地，開啟終端 進入資料夾輸入git pull

顯示這個代表就被拿到本地了。

再輸入 git checkout index-icons 就可以了。

在src/pages/home/compontents下新建Icons.vue

然後在Home.vue裡引入這個元件

把圖示進行v-for迴圈

<template>
    <div class="icons">
       <swiper :options="swiperOption">
         <swiper-slide>
           <div class="icon" v-for="item in iconList" :key="item.id">
             <div class="icon-img">
               <img  class="icon-img-content" :src="item.imgUrl">
             </div>
             <p class="icon-desc">{{item.desc}}</p>
           </div>
         </swiper-slide>

       </swiper>
    </div>
</template>

如何實現迴圈 分頁呢

使用computed計算屬性

下載在瀏覽器裡下載vue，可以很好的讓我們除錯vue

如果字型過多，如何解決呢

超過部分用省略號顯示

overflow :hidden
white-space:nowrap
text-overflow : ellipsis

把這個方法進行封裝

在src/assets/styles下建立mixins.styl 檔案，裡面寫

ellipsis() 方法

overflow :hidden
white-space:nowrap
text-overflow : ellipsis

然後引入在Icons.vue 然後使用

然後提交專案

進入資料夾 git add .

git commit -m ' add icons'

這時把程式碼提交到本地倉庫，然後把程式碼提交到線上倉庫git push

然後進入master分支 git checkout master  因為master分支放的是整個工程最新的程式碼  把master分支和線上的index-icons分支 進行合併 git merge origin/index-icons 然後 git push