接下來就是照著一個成熟的應用ui借鑒（chao）一下，畢竟我們是練手，又不會自己做設計，對吧。
干活之前得理清頭緒，分步驟進行。
分析頁面功能
我們看看有哪些模塊，首先看底部導航，有4個，分別是：
推薦，分類，購物車，我的。
然后繼續(xù)拆分，每個導航對應的頁面又有哪些模塊。
首頁：限時活動，新手區(qū)，產(chǎn)品列表展示
分類：分類名稱，產(chǎn)品列表展示
購物車： 購物車產(chǎn)品增刪改，計算價格
我的： 訂單，收藏，設置，客服，幫助，優(yōu)惠券
二級頁面：產(chǎn)品詳情，訂單列表，結(jié)算頁面，支付提示，收藏列表，幫助中心
找到需要的組件
限時活動，新手區(qū)，可以用scrollview實現(xiàn)，
產(chǎn)品列表可以用瀑布流組件
分類有個現(xiàn)成的模板
個人中心的，訂單，設置，優(yōu)惠券也都有模板，客服，幫助用幾個小組件組合即可
收藏可以用產(chǎn)品列表一樣的瀑布流， 產(chǎn)品詳情用基礎組件拼裝即可，底部購買按鈕組也有模板
那么就只剩下購物車需要自定義了。
組裝
接下來就是組裝工作，圖片資源先不管它，用u-image組件占個位再說
自定義
下面我們來自己寫一個購物車組件
功能點如下：
- 點擊添加購物車->提示添加成功
- 進入購物車可查看添加的商品
- 在購物車中可以加減商品數(shù)量并計算總價。
實現(xiàn)方式：
由于整個應用中都需要同步購物車狀態(tài)，所以通過vue的store來進行保存
完善資源圖片
下面來填充一點素材，讓這個應用看起來像個真的。
ok，前端靜態(tài)部分就差不多完成了。接下來是交互邏輯與后臺綁定。
