1：專案原始碼：https://github.com/Hightinstance/project/tree/master/vue/vue_smart_project/vue_smart_black //功能有詳細的註釋。

1：錘子商城實戰

（1）       環境配置

Vue腳手架，vuex,vue-router

 (2) 建立目錄結構

 (2)元件拆分（頁面分析）

公共樣式引入 <link rel="stylesheet" href="/src/assets/css/reset.css">

拆分頭部樣式：公共元件<header>

(3)shop元件

購物車元件拆分Item元件：進行元件資料的傳遞來渲染介面；

Item：需求

（1）顯示當前商品

（2）點選的時候顏色切換，根據顏色你index給標籤繫結事件，給標籤新增選中的樣式  （3）把靜態圖片用動態的來代替（圖片的連結文字），價格，顏色，圖片的切換。

:class="{'active':index==itemIndex}" //表示當前被選中的樣式

(4)購物車元件（頭部元件，全域性都可以看到，需要拆分為元件）vuex來管理，全域性的資料

功能實現：

（1）加入購物車功能 （點選的時候加入功能實現）

（2）刪除購物車功能 （在購車車元件，點選刪除的時候刪除裡面的資訊）

（3）最大數值限制功能，彈出視窗 （當商品限購數量超過最大值的時候，彈出警告視窗）

（4）彈出視窗的隱藏顯示，加入購物車動態展示 （預設隱藏購物車）

（5）小球飛入的功能實現 （在點選加入購物車的動畫過程）

（5）商品詳情頁展示

（1）商品詳情頁元件靜態編寫

（2）路由元件的配置路徑和點選跳轉，（商品詳情資料的傳遞）

 <router-link :to="{ path: '/item', query: { ItemId: `${item.sku_info[itemIndex].sku_id}` 
 
}}"></router-link>

（3）根據傳輸的ID顯示動態的介面

（4）顏色，圖片迴圈顯示，狀態的選中

（5）動態互動，點選顏色路由的切換，商品圖片的切換

（6）購物車詳情頁展示

（1）       分析元件的位置，為路由元件（配置路由器），拆分為靜態元件

（2）       渲染為動態的介面（item資料迴圈，顯示，路由的跳轉），刪除功能

（3）       介面自己的互動行為

（4）    選中和非選中狀態的操作，首先獲取按鈕的狀態，然後獲取全選按鈕的狀態，進行操作

（5）    刪除所有選中商品，選中所有商品，計算選中的價格和數量

（6）    路由連線跳轉，在有商品選中的情況下

（7）訂單結算頁展示

1：購物清單資訊：（1）商品資訊套取 （2）運費的計算

2：收貨地址和發票資訊：（簡單一些功能）

（1）       收貨地址動態頁面替換 (2)選中狀態的切換 ，點切換選中狀態（3）新增新地址的視窗，點選元件的關閉可以關閉顯示（元件的通訊）父類定義方法子類，進行呼叫。

（2）將提交的資料放入陣列中，（地址，發票資訊，選擇的數值，價格，運費，時間等等）

（3）資訊提交的儲存之後，購物車的商品應該被去除。

（4）跳轉到支付頁面

（7）       adress-pop元件功能實現

（1）       表單資料的自動蒐集

（2）       欄位的檢驗功能

（3）       選擇市區三級聯動

（4）       點選預設地址的選中狀態

（5）       資訊驗證功能，開啟儲存按鈕。（深度監視當表單每一項資訊填寫的時候都要進行驗證）

（6）       點選按鈕的時候加入位址列，更新預設值，關閉視窗，

（8）       訂單介面

（1）       在路由裡面ID數值，篩選出數值在進行動態編寫。

（2）       點選支付之後，狀態的切換。

（3）       個人中心介面，子路由的跳轉。