Vue商城項目
結構分析：
固定的頭部： mint-ui組件庫的Header組件
切換的組件： 放置一個router-view來展示路由匹配到的組件
固定的底部： MUI框架的代碼片斷 tabbar
制作tabbar中的圖標
- 圖標的類名在icon.thml和icons-extra.html中查找
- 使用icons-extra.html中的圖標時要引入對應的字體文件和樣式文件
將tabbar中的鏈接改造成路由鏈接，並設置高亮
- 導入路由
- 注冊路由
- 新建路由js文件
- 引入路由文件
- 掛載路由
- 設置路由的高亮類
完成tabbar中的路由組件切換
- 新建需要的組件
- 路由js文件中引入組件
- 配置路由路徑
- 新建一個坑放置路由監聽到的組件
制作Home組件中的輪播圖 mint-ui的swipe組件（注意手動設置高度）
獲取輪播圖的數據，使用vue-resource訪問后台，獲取數據
this.$http.get獲取
獲取到的數據，保存到data
v-for渲染每個item項
改造九宮格區域的樣式-使用mui組件grid-default
src="[object Module]"的解決方法（https://blog.csdn.net/simper_boy/article/details/103455444）
根路由重定向
組件切換時的動畫效果
問題：
頭尾滾動條 解決:app overflow-x
右進右出 解決：v-enter v-leave-to 分開
切換的組件一上一下 解決： v-leave-to 加定位
新聞資訊路由改造
新聞資訊列表制作
1.繪制頁面 使用mui框架的media-list組件
2.使用$.http.get獲取數據
3.渲染頁面
新聞資訊列表底部處理和時間處理
新聞列表跳轉到新聞詳情
標簽改為router-link
設置路徑 帶id
新建新聞詳情組件
配置路由鏈接
新聞詳情頁面制作
制作評論子組件並繪制
先單獨制作評論子組件 再導入到需要的組件中
獲取評論內容
點擊加載更多按鈕，獲取更多評論
1.為按鈕綁定事件，在事件中請求下一頁數據
2.為了防止新數據覆蓋老數據，老數據要拼接新數據
發表評論功能
1.textarea數據雙向綁定
2.按鈕綁定事件
3.判定數據不能為空 將數據插入到數組前面
改造圖片分享按鈕為路由鏈接 並顯示對應的組件頁面
繪制圖片列表頁面
1.制作頂部滑動條
2.制作底部圖片列表
制作滑動條的坑
1.借助MUI的tab-top-webview-main.html
2.去除全屏類
3.無法滑動 需要初始化 必須在mounted后初始化 此時dom元素可操作
4.tabbar無法點擊 tabbar中的mui-tab-item類沖突 將這個類改名字 重置樣式
5.獲取所有分類 渲染分類列表
制作底部圖片列表
1.使用mint-ui的懶加載技術
2.導入懶加載模塊
3.獲取數據渲染圖片列表
4.制作圖片列表樣式
5.提高APP中 header的優先級 房子覆蓋
點擊圖片，跳轉到圖片詳情頁面，使用tag屬性指定樣式
制作圖片詳情組件
制作結構
獲取數據
加入評論子組件
制作縮略圖 使用vue-preview插件
制作商品列表
商品列表路由改造
實現商品列表的兩列布局 使用flex布局
手機調試 處於同一wifi --host ip地址 手機訪問這個地址
獲取數據
獲取下一頁數據
制作商品詳情頁面
路由改造（編程式路由） this.$router.push({ name: 'goodinfo', params: { id }});
繪制頁面 mui card.html
獲取商品詳情輪播圖數據
將之前用到的輪播圖獨立成一個單獨的組件，再使用
解決輪播圖圖片寬度是自適應還是100%的問題 
（ifsull是個布爾值 full是定義的樣式類）
繪制商品購買區域 使用mui組件 numbox.html
繪制商品參數區域 並獲取數據
制作圖文介紹頁面和商品評論頁面並使用編程式路由
獲取圖文介紹頁面和商品評論頁面的數據
實現基本的加入購物車小球並完成動畫
解決小球動畫的距離問題 translate的距離不能寫死（解決方法 徽標距離頂部的距離減去小球初始距離頂部的距離） el.style.transform = translate(${xDist}px,${yDist}px);
將number-box中的數字傳遞給父組件（GoodInfo.vue）
通過JS API的方式設置number-box的最大值
啟用vuex並設計購物車的數據結構
實現點擊加入購物車
實現徽標數值的自動更新 使用getters 類似於計算屬性 作為屬性調用 而不是方法
實現購物車商品的本地持久存儲
繪制購物車頁面中商品列表的布局
獲取購物車中所有商品列表的數據（根據本地存儲的car中的id去訪問后台，獲取相應的照片，標題等數據來渲染購物車組件）
渲染購物車商品列表中的商品數量
購物車商品數量改變同步到store中
實現購物車中的刪除功能
繪制結算頁面
將store中的狀態同步到頁面上去
同步頁面的商品勾選狀態到store中
實現勾選數量和總價的自動計算
實現返回按鈕的功能
vuex的概念
- vuex是為了數據共享而存在的 props(父子組件之間傳遞的數據) data(組件私有數據) vuex(組件之間需要共享的數據)
vuex的使用
- 下載 npm i vuex -S
- 導入 安裝
- new一個實例對象
- 實例對象掛載到vm實例上，其他組件就可以訪問了，訪問方法是this.$store.state.***
操作vuex中的數據
- 不推薦在組件中直接操作數據，而是通過調用mutation中的方法來操作數據
- mutation中方法的調用方： this.$store.commit('方法名')
獲取vuex中的數據
- 使用getters