寫在前面的話：
其實都是按照設計稿來的，在做之前，分析一下哪些個部分是可以公用的，就抽出來做成模塊，逐漸改變開發思維。
三、布局說明
在很多的項目中，頭部和尾部的公用性很大，所以在這里可以抽出來，寫成組件；
上一篇說道，header.vue中要用到 app.vue的數據時，需要做的，這里就不重復了。
強調一下以下問題，不分先后順序：
1）出現在文中的內容處：<span>{{ seller.xxx}} </span>
2）被綁定在某個元素的屬性上：<img :src="seller.avatar"> (注意當中的雙引號！！)
3）手機端的像素壓縮比：一般有兩種（2 or 3），這時候要用到媒體查詢，並結合 stylus 的樣式編程功能實現復用。
4）同一個地方的樣式與顯示的數據相關時，一般數據中都會給出一個判斷的字段，因此我們需要根據此字段選擇要顯示的樣式。
比如，此例中的一些 優惠，打折……的小圖片的顯示，就是根據了一些 type的判斷，結合stylus的可編程特性來變換樣式。
延伸一下
5）一般來說，設計稿中的純色小圖標都會做成 svg格式的，在使用時需要轉成 font 字體：去 iconMoon官網
實例：
第1,2點就沒什么好說的了，第3,4點是非常的實用的。
第3點實例：
假設在header.vue中要引入一張背景圖，素材如下圖：
其大小分別為： （60px * 36px） (90px * 54px)
（別看一張大一張小，其實在使用時需要指定該背景圖的大小，是一樣的~ 在這里都是 30px * 18px）
首先這里肯定要用到媒體查詢，考慮到頁面的其他部分還會有這種需求出現，所以在這里使用stylus 的樣式編程功能實現復用。
做法：1）先將圖片拷貝到包含 header.vue 的文件夾 header中，方便同一個組件的資源統一管理
2）在common/stylus文件夾下新建一個mixin.styl文件，輸入以下代碼：
bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")
3）在 header.vue 的style中引入以上 mixin.style 文件，並使用bg-image：
<style lang="stylus" rel="stylesheet/stylus"> @import "../../common/stylus/mixin.styl" .brand bg-image('brand') // 這里的 'brand' 是字符串的形式！ 表示的是圖片的名稱，其他部分也需要時，可以換成相應名稱就好了。 background-size: 30px 18px background-repeat: no-repeat vertical-align: top //一般圖片與文字的對其方式需指定 top 是使其頂端對其 </style>
所以說，在其他部分需要時，傳入相應的名稱就可以直接可以用啦~
第4點實例：
好用、常用的方法學起來~
一般是通過類名的變換來變換相應的樣式，然而字段一般給的都是 數字 之類的，所以要稍微做一下轉換，如下面的 classMap就是用來將數據轉換成想要的類名。
例：要在 header.vue中使用這個方法實現一些小圖標（優惠，打折……）的變換。
1. 找到相應的數據字段，如下圖中的supports[n].type 字段：
2. 在 header.vue中的 template中加入以下代碼：
<div v-if="seller.supports" class="supports"> <span class="icon" :class="classMap[seller.supports[0].type]"></span> <span class="text">{{seller.supports[0].description}}</span> </div>
這里把span標簽的一個類直接與 classMap 綁定，然后 classMap與之前的數據中的字段相關，從而實現數據字段控制了樣式~
3. 在 header.vue中的 script中加入以下代碼（注意紅色部分，就是用來轉換數據的）：
注意：是寫在 created （）{ } 中~
4. 在 header.vue中的 style 中加入以下代碼（注，這一步是在進行了 第3點 實例分享之后才可用~）：
上面的bg-image()是 第3點實例 中的代碼復用部分~
小細節：vertical-align:top; 是為了讓背景圖標與文字對齊~
第5點實例：
去 iconmoon官網動手試試吧~
以下為過程截圖。
呃呃呃，以后更新。