项目功能演示
项目开发准备
创建项目并运行
资源准备
项目源码目录设计
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.采用模块化、组件化、工程化的模式开发;