0.新建项目(git) : 处于master分支
1.初始化环境(router axios  mock vuex 总线 ) : 处于dev分支
2.新增需求文档(sph.txt): 处于dev分支
3.给请求加进度条(nprogress) : 处于damu分支 合并到dev分支
    文档: https://www.npmjs.com/package/nprogress
4.将静态页面拆为静态组件 :
    当命中登录组件/注册组件时;我们是不需要显示footer组件的(路由元信息)
5.完成界面上的一些UI效果;业务逻辑
        a.完成头部的路由跳转功能(header组件内):
            点击登录 --> 登录界面
            点击免费注册录 --> 注册界面
            点击logo图标 --> 主界面
            点击我的订单  --> 订单界面
            点击我的购物车  --> 购物车界面

            点击搜索按钮  --> 搜索界面(携带数据的!!!)
                   当使用命名路由时! params配置不能为空对象!如果为空对象会导致url和对应的组件对不上!
                   当路径命中404时;我们隐藏头部 底部
                   
        b. 实现三级分类相关的功能(typeNav组件)
            TypeNav组件与vuex交互;如何读取分仓库的数据
            通过vue的数据 和 dom事件控制二三级分类列表的显示与隐藏
            优化高频事件触发: 利用lodash进行函数节流处理
            优化减小打包文件: 对lodash库实现按需引入
            解决快速移出一级分类后 二三级分类可能还处于显示状态的bug
            点击三级分类中的任意一级 通过声明式导航 都应该要跳转到search组件;
                优化减少组件对象数量; 使用编程式导航代替声明式导航
                将分类信息作为query携带到search组件
                优化search组件(与路由相解耦 收集相关数据 准备发送请求)
                合并分类的query参数 与 搜索的关键字的params参数
                优化事件处理效率: 利用事件委托 && 标签自定义属性携带动态数据
            控制一级列表的显示与隐藏
                    只有在home页上 一级分类默认要要显示;不具备显示隐藏的切换能力
                    在其他页 一级分类默认要隐藏 ; 具备显示隐藏的切换能力
                    一级列表显示隐藏的过渡效果
                        1. 必须结合 v-show v-if指令
                        2. 要有过渡样式
                        3. 必须使用transition组件进行包裹
            优化请求执行的位置, 减少请求次数
                三级分类数据的请求是在app组件开始获取的;而不是TypeNav组件
        c. 实现ListContainer组件的相关功能
            使用swiper实现静态页面轮播(swiper)
            解决swiper动态页面轮播的bug($nextTick)
            解决多个swiper冲突的问题(将参数从class换为一个真实的dom节点)

        d.  实现Floor组件的相关功能  ×
            watch在初始化加载时不会调用;导致floor里的轮播失效
            抽象了公共的轮播组件

        e.  实现search组件的相关功能(details部分)
            抽象了公共的分页组件
            Element-UI分页组件的使用
            只要搜索商品的条件发生改变;商品数据也要重新请求;整个分页要重置到第一页
            扩大三级分类中导航的热区
            在search组件点击三级分类;整个三级分类需要隐藏
            bug: 重复点击同一个分类;没有发送请求 分页无法重置到第一页
                解决:通过给路由加时间戳hash来解决!
         f.  实现search组件的相关功能(bread部分)
                渲染出商品过滤条件(在全部结果中显示)
                点击商品过滤条件的x按钮 同步URL&重新发请求&分页要回到第一页
                点击删除关键字过滤条件的x按钮 头部输入框的数据要清空
                当头部输入框清空时 点击三级分类是不会再携带keyword信息的
          g.  实现search组件的相关功能(SearchSelector组件)
                 点击品牌进行商品的过滤
                 点击商品平台属性进行商品的过滤
                 排序功能
                 将排序按钮抽象为公共的组件
          h.  实现detail组件的相关功能
                      销售属性选中状态的切换 和 收集
                      多页轮播
                      放大镜
                      点击加入购物车按钮;发送加入请求;成功后跳转到购物车成功界面
           i.  实现addCartSuccess组件的相关功能
                      点击查看商品详情按钮跳转到 detail组件
                      点击去购物车结算按钮跳转到 shopcart组件
           j.  实现shopcart组件的相关功能
                       选中 全选&全不选
                       删除 批量删除
                       修改商品数量
           k.  实现register login组件的相关功能
                       获取短信验证码
                       注册
                       登录
                       表单验证
                       登出(退出登录)
                       自动登录
        L. 支付流程相关组件的功能(重点:路由守卫功能)
            ---路由守卫功能
               1. 当前结算页 支付页 支付成功界面 个人中心页在未登录的情况下是不可以访问的
                        在全局路由守卫中执行!
               2.当处于登录状态时 再也不能去登录页
                        在登录路由对应的组件级别的守卫中执行!
               3. 当跳转到购物车添加成功页面时;必须要指定购物车的商品数量!
                        在购物车添加成功路由对应的组件级别的守卫中执行!
               4. 一定要确保跳转流程的顺序;
                        购物车列表组件->结算页面->支付页面->支付成功页面 这个顺序
                        在结算页面 支付页面 支付成功页面对应的组件级别的守卫中执行!
            ---当处于搜索页时;再访问搜索页;浏览器不应该记录跳转;应该要使用replace进行跳转
            ---uuid & token(后台逻辑!!!)
                添加购物车
                    如果只有 uuid;购物车数据加给uuid所对应的表
                    如果只有 token;购物车数据加给token所对应的表(在项目中没有当前情况)
                    如果同时有uuid&token;购物车数据加给token所对应的表
                获取购物车
                    如果只有 uuid;获取uuid所对应表的数据
                    如果只有 token;获取token所对应表的数据(在项目中没有当前情况)
                    如果同时有uuid&token;将uuid表中的数据剪切到token表中

            实现整个支付流程
                获取用户的地址信息: /api/user/userAddress/auth/findUserAddressList

-------------------------------------------------------------------

6.发请求获取数据 进行组件渲染
        a.动态化 typeNav组件
            注意postman的使用!
        b.动态化 ListContainer组件
            为轮播数据进行了mock
        c.动态化 Floor组件
        d.动态化 search组件
            details部分(总共会有三个情况需要发送请求获取商品数据渲染details部分)
                0. search组件被第一次加载时
                    watch.$route.handler(immediate:true)
                1. 分页相关的参数发生变化
                    当前页改变: handleCurrentChange
                    每页显示多少条数据改变: handleSizeChange
                2. 搜索商品相关的参数发生变化(搜索条件)
                    路由信息产生变化: watch.$route.handler
            SearchSelector组件
            bread部分
        c. 动态化 detail组件
            detail组件原生内容
            ImageList组件
            Zoom组件
        d. 动态化  addCartSuccess组件
            addCartSuccess组件的动态化渲染使用到的数据 不能使用从仓库中读数据的形式;因为一刷新 数据就跑了!
            addCartSuccess组件的动态化渲染使用到的数据 让detail组件带到addCartSuccess组件来!(query 总线)
            addCartSuccess组件的动态化渲染使用到的数据 通过离线存储来实现!
        e. 动态化 shopcart组件
        f. 动态化 register login组件
        g. 完成整个支付流程
            在购物车组件点击结算 --> 交易页
            在交易页组件点击提交订单 --> 支付页
            在支付页组件点击立即支付 --> 支付成功页
            在支付成功页组件
                点击继续购物 --> 主页
                点击查看订单 --> 个人中心