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） 個人中心界面，子路由的跳轉。