使用的是vue-cli 2.x腳手架
一、頭部組件的實現(xiàn)
二、使用vue-router實現(xiàn)選項卡
項目的地址：
一、頭部組件的實現(xiàn)
1、需求分析：點擊頭部組件，出現(xiàn)商家優(yōu)惠信息彈出層。點擊x按鈕關(guān)閉彈出層。
2、使用到的技術(shù)點：vue-resource、vue指令、vue事件修飾符、過渡效果、2x和3x圖使用、CSS Sticky footer布局、v-header組件的制作、flex布局、
3、實現(xiàn)過程中遇到的問題：
? ? ? ? 由于彈出層是我嵌套在頭部組件中的，用來控制顯示和隱藏的。所以在彈出層里面的x按鈕使用點擊事件會失效。原因已經(jīng)查出來了，是由于我在頭部組件最外層已經(jīng)設(shè)置了@click點擊事件，在內(nèi)部又想做一個點擊事件，結(jié)果事件冒泡導致不能取變量為反控制彈出層顯隱。（經(jīng)驗一）解決問題的方法，vue提供了解決事件冒泡的修飾符@click.stop.
4、幾個關(guān)鍵地方實現(xiàn)的思路：
①獲取數(shù)據(jù)，傳遞到頭部組件中。
獲取數(shù)據(jù)之后使用v-bind將數(shù)據(jù)傳遞給子組件，子組件用props屬性接收。vue-resourse已經(jīng)在main.js文件全局注冊了。
②transtion組件和v-show的聯(lián)合使用
transtion組件，vue官方提供了一個name屬性，通過該屬性可以設(shè)置對應(yīng)的動畫需求。
v-show是用過設(shè)置一個boolean數(shù)據(jù)類型，通過點擊事件來控制頁面的顯隱。
（一般v-show和v-if拿來做比較。）
③彈出層商家詳情頁的字體圖標使用classMap數(shù)組實現(xiàn)動態(tài)綁定class.
通過數(shù)據(jù)結(jié)構(gòu)知道自己想要綁定的是哪種圖標，然后設(shè)置一個數(shù)組動態(tài)添加屬性，達到需求。
上面為什么要使用v-if？思考一下。
④CSS Sticky footer布局,是為了解決在底部的x按鈕，假設(shè)內(nèi)容過多，會將x按鈕覆蓋掉的問題。
設(shè)計這種布局的核心思想。其實就是使用一個承載內(nèi)容的容器1還有腳步內(nèi)容的容器2。容器1在自己的底部設(shè)置和容器2高度一樣的內(nèi)邊距，容器2通過定位和margin到達自己需求的地方。
二、外部組件的實現(xiàn)
1、需求分析：實現(xiàn)seller（商家）、goods（商品）、ratings（評論）組件制作，類似于選項卡的功能，實現(xiàn)點擊切換效果。（組件里面的留給下篇文章）
2、使用到的技術(shù)點：vue-router的使用、組件的（引用、注冊、使用）
vue-router的使用分三步
第一步：在main.js進行全局注冊
第二步：在router文件下的index.js文件給組件配置路由
第三步：使用vue-router提供的組件，router-link和router-view實現(xiàn)選項卡功能
組件（引用、注冊和使用）
