專案功能演示
專案開發準備
建立專案並運行
資源準備
專案原始碼目錄設計
stylus使用
組件化編碼
引入vue-router
FooterGuide組件
各導航路由組件(靜態)
HeaderTop組件
使用swiper實現商品分類清單輪播
ShopList元件(靜態)
Login組件(靜態)
啟動後台應用程式並測試接口
封裝ajax請求函數
封裝介面請求函數
使用git對專案進行版本控制
複習
配置代理實現跨域ajax請求
創建vuex的整體結構
使用vuex管理首頁數據
非同步顯示目前地地址
非同步顯示食品分類輪播列表
使用watch和$nextTick解決輪播的bug
非同步顯示商家列表
使用svg顯示載入中提示介面
Star組件
註冊登陸功能演示說明
登陸介面效果1_切換登陸方式
登陸介面效果2_手機號碼檢查
登陸介面效果3_倒數效果
登陸介面效果4_切換密碼的顯示與隱藏
登陸介面效果5_前台表達驗證
動態一次性圖形驗證碼
定義介面請求函數
登陸_發送簡訊驗證碼
登陸_完成登陸請求
登陸_儲存使用者資訊到vuex
登陸後更新個人中心介面
登陸更新跳轉路由
自動登陸
退出登陸
建構商家整體介面
json的理解
設計json數據
使用mockjs模擬介面數據
ajax請求mockjs模擬的接口
ShopHeader組件
非同步顯示goods數據
滑動效果分析
使用better-scroll實現回彈滑動
收集scrollY
收集tops
滑動右側清單更新目前分類
解決慣性滑動不會更新目前分類的bug
點擊分類項滑動右側列表
CartControl元件1
CartControl元件2
Food組件1
Food組件2
ShopCart組件1
ShopCart組件2
顯示購物項目列表
解決清單顯示的3個bug
購物車動畫
購物車清單的滑動
清空購物車
ShopRatings組件1
ShopRatings組件2
ShopInfo組件1
ShopInfo組件2
ShopInfo組件3
Search元件
快取路由組件對象
路由組件懶加載
圖懶載入vue-lazyload
使用moment實現日期過濾器
打包文件分析與優化
1.基於 Vue 的新的版本; 2.專案是關於外送業務的前後後台分離Web App,功能模組包含商家, 商品, 購物車, 用戶管理等多個模組; 3.後台應用技術架構為: Node + Express + Mongodb + Mongoose; 4.前台應用技術架構為: vue + vuex + vue-router + webpack + ES6; 5.採用模組化、組件化、工程化的模式開發;