vue-饿了么项目总结

Posted 2020-10-05

这本来是写在最后面一段的，我现在把他写在了最前面，方便我们事先知道，整个项目做完之后是什么样子的

• 项目完成之后在 根目录 下 npm run build （就是 npm run dev 的那个目录）
• 会在根目录下生成一个 dist 目录，其中包含着 index.html 和一个css目录，一个js目录
• 按官方说，这个 dist 目录必须 http server 环境下才能运行
• 下个 xampp 在本地服务下访问
  访问时出现了以下几个问题：

1. css js 引用路径出错 （将 cofig目录下的 index.js 里的 assetsPublicPath:‘./‘ 这样设置即可）
2. 由于视频上是写了一个 node 后端服务，访问本地的 data.json 文件，然后用 vue-resource 访问这个 node 服务才请求到的接口
   打包之后，访问不到这个 node 服务了，自然就出错了
   如何解决：我在朋友的帮助下，知道了 easy-mock这个东西，然后 把data.json 文件 用 easy-mock 制作成了 一个 http 接口
   后来因为 github 不能访问 http 接口，又把 http 改成了 https（我最后打包的项目放在了 gitpages上了）

项目启动

添加静态资源文件，修改 build、dev-serve.js mock模拟数据，
添加 meta 标签
碰到 换台机器 报错-没有 modules ，暂时解决方法，删除整个 node_modules,然后重新 npm install

建立好 es6 书写， stylus书写方法，增加了tab导航栏，配置好了路由

学习了 1px 边框制作（不过感觉用处不大）
编写 stylus mixin 函数并在引用
(注意：引入外界stylus样式文件时：只能用 @import 在style标签里引用
且路径不可以在 webpack.base.conf.js alias别名)

全局通用样式，字体文件，图标文件
可以用统一在同级目录下用一个 index.styl
文件作为出口，在其内部 用 @import ‘./minix.styl‘ 引入
然后在再 webpack.base.conf.js  统一配置 alias 别名
之后再在 main.js  引入这个 index.styl 文件 即可使用这些样式文件
如：import ‘common/stylus/index.styl‘

stylus 文件书写
    1.尽量使用类 css 语法即 {}
    2.尽量避免拷贝代码，产生多余的空格缩进问题

做完之后好好学习一下 flex 布局
display:flex  flex:1
完成 header 组件 ，goods组件 完成布局

better-scroll 的用法

better-scroll 实现列表滚动联动
1. 初始化 better-scroll
    _initScroll() {
        this.menuScroll = new BScroll(this.$refs.menuWrapper,{
            click:true        //默认派发点击事件
        });

        this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
            click:true,
            probeType:3   //实时侦测滚动
        });
    },

2. 在 vue 钩子函数 created 内 this.$nextTick 回调里面调用 better-scroll初始化函数

菜单栏根据foodList列表滚动实时高亮

1. 通过 _calculateHeight 方法动态计算出 每个列表的标题 的 clientHeight 值，并将其推进一个 listHeight 数组
2. 当滚动 foods 列表时，会动态计算出 pos.y 的值，
3. 把这个 pos.y 的值在计算属性里判断 其在 listHeight 数组中对应的 index 值
4. 然后将菜单列表数组中的 index 值 设置为高亮 

点击左侧菜单栏，右侧 foods 列表实时滚动到相应位置

1. 给 menu-item 绑定一个 setMenu(index) 方法
2. 然后根据这个 index 获取foodslist 里面对应的 li dom 元素
3. 利用 scrollToElement(el,100) api 自动将foodlist滚动到合适位置

selectMenu(index) {
    // 因为有自动派发事件，所以需要阻止，
    if(!event._constructed) return; 
    console.log(index);
    let foodList = this.$refs.foodList;  //通过 $refs.foodList获取当前dom元素
    let el = foodList[index];
    this.foodsScroll.scrollToElement(el,10);
}  

购物车计算属性使用

1. 将 item.foods 数据 通过 props 属性传递到子组件（cartcontrol组件）

2. 在 cartcontrol 组件内 执行  addCart、decreaseCart 方法改变  item.foods.count 的值

    如果 item.count 值不存在，使用  Vue.set(this.food,‘count‘,1) ; 
    给foods增加 count 属性，如果直接增加 count 属性，不会产生响应式数据，必须用  Vue.set() 方法

3. 在子组件改变 item.foods对象的值，相应的父组件内的 item的值会随之改变（js复杂数据类型地址引用）

4. 在父组件 goods.vue 利用计算属性 动态的生成购物车数据，然后通过 props属性传递给 shopcart.vue 组件

    计算属性的计算出的值为响应式数据可以直接拿来使用,即在  v-for 中直接遍历  selectFoods 
    
    // 选中的商品即购物车内的商品
    selectFoods() {
        let foods = [];
        this.goods.forEach((good) => {
            good.foods.forEach((food) => {
                if(food.count){
                    foods.push(food);
                }
            })
        });
        console.log(foods);
        return foods;
    }
    
    

cartcontrol 增加和减少商品小球动画

1. 减少商品小球动画
    利用 vue transition 组件-过度动画 和 v-show 配合 可以给任何元素和组件添加 entering/leaving过度 
    条件渲染 （使用 v-if）
    条件展示 （使用v-show）
    动态组件
    组件根节点
    当插入或删除包含在 transition 组件中的元素时，Vue将做如下处理：
    1.自动嗅探目标元素是否应用了 css 过度或动画，如果是在恰当的时机添加/删除 css 类名
    2.如果过渡组件提供了 javascript钩子函数，这些钩子函数将在恰当的时机被调用
    3.如果没有找到钩子并且也没有检测到css动画，DOM操作（插入/删除）在下一帧中立即执行

    过度的 css 类名
    1. v-enter 定义进入过渡的开始状态，在元素插入式时生效，在下一帧移除
    2. v-enter-active 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除
    3. v-leave 定义离开过度的开始状态。在离开过渡被触发时生效，在下一帧移除
    4. v-leave-active 定义离开过渡的结束状态，在离开过渡被触发时生效，在下一帧被移除

    html:
    <transition name="move">
        <!-- 父元素用于控制小球 透明度变化 -->
        <div class="decrease" v-show="food.count>0">
            <!-- 子元素用于控制小球旋转变化 -->
            <span class="inner icon-remove_circle_outline"></span>   
        </div>
    </transition>

    css：
    <!-- 小球enter之后最终结束时的状态 -->
    .decrease{
        transition:all 0.4s linear;
        transform:translate3d(0,0,0);
        opacity:1;
        .inner{
            transition:all 0.4s linear;
            transform:rotate(0deg);
        }
    }
    <!-- 小球刚刚enter的状态和小球leave-active状态 -->
    &.move-enter,&.move-leave-active{
        transition:all 0.4s linear;
        transform:translate3d(24px,0,0);
        opacity:0;
        .inner{
            transform:rotate(180deg);
        }
    }

2. 增加小球动画

    实现过程：

    1、小球最终的落点都是一致的，在左下角购物车按钮处 （transform:translate(0,0,0)）

    2、传递点击的 dom 对象
        在 cartcontrol 组件里点击 + 时， 将点击的 dom 元素，通过通过 $emit 派发给父组件 goods.vue
        this.$emit(‘add‘,event.target);
        <div class="cart-wrapper">
            <!-- add自定义事件用于派发当前点击的dom元素，add为子组件方法，addFood为父组件方法 -->
            <cartcontrol :food="food" @add="addFood"></cartcontrol>
        </div>
        // 子组件$emit派发而来的事件
        addFood(target) {
            this._drop(target);  //传递 target
        },
        _drop(target) {
            // 体验优化,异步执行下落动画
            this.$nextTick(() => {
            //调用 shopcar 组件中的 drop 方法，向 shopcar组件 传入当前点击的 dom 对象
                this.$refs.shopcart.drop(target);
            });
        }

    3.在 shopcar 组件里，创建 小球 dom 结构

        <!-- 小球容器 -->
        <div class="ball-container">
            <div v-for="ball in balls">
                <!-- 过度钩子函数 -->
                <transition name="drop" v-on:before-enter="beforeDrop" v-on:enter="dropping" v-on:after-enter="afterDrop">
                    <!--  外层纵向运动，内层横向运动-->
                    <div class="ball" v-show="ball.show">
                        <div class="inner inner-hook"></div>
                    </div>
                </transition>
            </div>
        </div>


    4. 创建 一个小球数组，内置5个对象（5个小球，均有 show 属性，初始值为false）
        以便在多次快速点击时，屏幕出现多个小球
        5个小球的初始位置 均在 左下角 购物车按钮处
        创建一个 dropBalls 数组用于存储 处在下落过程中的小球
        执行下落时 将 父组件传递过来的 dom 对象 当做一个属性 给 ball，方便 在下面的方法中计算 ball 的位置
        data() {
            return {
                // 创建5个小球用于动画
                balls:[{show:false},{show:false},{show:false},{show:false},{show:false}],
                dropBalls:[], // 存储下落小球
            }
        },
    5.执行 v-on:before-enter="beforeDrop"  过度前钩子函数
        设置 ball 初始位置，计算处 初始位置与目标位置的 差值 x,y ，将小球 transform ：translate（x,y,0）到动画初始位置

    6.执行 v-on:enter="dropping"  过度中钩子函数
        手动触发浏览器重绘，将 ball 通过 transform ：translate（0，0，0） 移动到目标位置

    7. 执行 v-on:after-enter="afterDrop"  过度结束钩子函数
        从存储下落小球的数组里 unshift 当前小球
        并将当前小球 display:none; show:false

    8.样式
    .ball-container{
        //外层 做纵向运动
        .ball{
            position:fixed
            left:32px
            bottom:22px
            z-index:200
            //y 轴 贝塞尔曲线
            transition:all 2s cubic-bezier(0.49, -0.29, 0.75, 0.41)
            //内从做横向运动
            .inner{
                width:16px
                height:16px
                border-radius:50%
                background-color:rgb(0,160,220)
                //x 轴只需要线性缓动
                transition:all 2s linear
            }
        }

购物车列表的显示隐藏状态

    按钮控制 fold => fold 控制 => listShow ， listShow => 控制状态显示 (在totalCount>0)
    在 data 选项里，定义一个 fold（折叠，true） 控制购物车的显示隐藏状态
    在 computed 计算属性里，定义一个 listshow 方法，来表示购物车列表的显示隐藏状态

    listShow() {
        if(!this.totalCount){  //假如所选商品为 0 ，return 掉结果，并将 fold 置为初始值
            this.fold = true;
            return false;
        }
        let show = !this.fold; // 否则，取 fold 的反值，靠 fold 的变化来 决定 列表显示与否
        return show;
    }

    在 method 方法里有个 toggleList 方法控制 fold 状态
    toggleList(){
        if(!this.totalCount){
            return;
        }
        this.fold = !this.fold;
    },

详情页组件

    将选中的商品 通过 props 传给 子组件
    <food @add="addFood" :food="seeFoodinfo" ref="food"></food>
    food 组件 通过 $emit 将food 组件添加购物车按钮传递给 父组件 以便实现小球动画

    addFood(target){
        console.log(target);
        //当前组件必须在父组件 引入处，bangding @add="xxx",继而执行 父组件的 xxx 方法
        this.$emit(‘add‘,target);
    },

    详情页 过渡动画
    <transition name="fade" ></transition>

    &.fly-enter-active, &.fly-leave-active {
        transition: all 0.2s linear
    }
    &.fly-enter, &.fly-leave-active {
        transform: translate3d(100%, 0, 0)
    }

ratingselect 组件（评价选择组件）

    1. 评价组件
    全部、推荐、吐槽 类似一个 tab 选项卡的栏目
    只看有内容的评价 筛选
    因为整个项目会有两个地方有这个东西，所以将其抽象为 ratingselect 组件

    组件书写：
    上边是一个 tab 选项卡
    1. 定义 三个常量 代表这三种状态
        const Positive = 0;     //推荐
        const Negative = 1;     //吐槽
        const All = 2;          //全部

        <div class="rating-type border-1px">
            <span @click="select(2,$event)" class="block positive" :class="{‘active‘:selectType===2}">{{desc.all}} <span class="count">{{ratings.length}}</span></span>
        </div>
        在点击事件中，将这三个状态，发送给 父组件
        由于这 三个选项 的 选中状态，是由父组件（food.vue）父组件通过 props 传递过来的，所以不可以在子组件中修改

        select(type,event){
            if(!event._constructed){
                return;
            }
            //不可以在子组件内，随意改变父组件传过来的值，通过 $emit 将子组件需要改变的值，发送给父组件，然后父组件在通过 props 传给 子组件，然后 view 就会发生相应的改变
            this.$emit(‘select‘,type);
        }


        父组件：
            使用子组件
            <ratingselect
                @select="selectRating"
                @onlyContent="toggleContent"
                :ratings="food.ratings"
                :selectType="selectType"
                :onlyContent="onlyContent"
                :desc="desc"
            ></ratingselect>
            
            //在 父组件 methods 对象中 用 selectRating 方法接收子组件 emit 过来的值，赋值给 父组件 selectType 然后在通过 props传递给子组件，从而实现改变
            selectRating(type){
                this.selectType = type;
                this.$nextTick(()=> {
                    this.scroll.refresh();
                })
            },

            //只看有内容的 评价 也是同理 

food.vue 组件中的时间转换函数

    在 common 目录下创建一个公共工具函数 utils.js ,然后在需要用到的 组件中，进行 import 引入 

    utils.js
        export 
            function formatDate(fmt){
                ......
            }


    在 food 组件中使用,只需用 import 引入要使用到的 方法 即可
    import { format } from ‘common/js/utils‘
    在组件中即可直接使用 该方法

　food.vue 里这种列表布局

    上下左右的间距，用 padding 撑开
    左边 用 flex 给个固定的尺寸 flex: 0 0 28px
    右侧 用 flex:1 ，右侧剩余空间 自动充满
    然后右侧内容自然流布局，上下 margin 分配
    右侧时间采用绝对定位
    布局：清晰简单明了
    
    一般情况下：列表中文字垂直居中的布局一般用 上下 padding 撑开，不要直接设置高度，用line-height居中
    文字高度用 line-height 撑开

商家页面(seller.vue) 商家实景页面

    商家实景左右滚动列表图片
    
    先根据图片尺寸和左右 margin 计算出 list 列表容器的 宽度，然后 用 better-scroll 进行左右滚动

    一般情况下，要在 vue mounted 之后就可以初始化 better-scroll 
    但是这时候，图片资源还没有请求到，所以无法得知 图片的 pics 的 length，继而无法得知，列表容器的宽度

    解决办法：
    vue 提供了一个 watch 对象，来用来监测数据的变化
    当 watch 监测到 seller 数据的变化，然后调用 _initPicScroll，初始化 better-scroll 
    watch:{
        ‘seller‘(){
            this.$nextTick(()=>{
                this._initPicScroll();
            })
        }
    },
    methods:{
        _initPicScroll() {
            if(this.seller.pics){
                let picWidth = 120;
                let margin = 6;
                let width = this.seller.pics.length * (picWidth + margin) - margin;
                this.$refs.picList.style.width = width + ‘px‘;
                
                //better-scroll左右滚动
                this.picScroll = new BScroll(this.$refs.picWrapper,{
                    scrollX: true,
                    eventPassthrough: ‘vertical‘
                })
            }
        }
    }

　 利用localStorage 在本地收藏商家

    收藏商家是放在本地缓存 localStorage 里的

    #１.　在　common/js/utils 文件里创建两个公共函数函数 写入 localStorae 和 读取 localStorage 
    # 2.  在点击收藏按钮时，调用存储 方法，首次进入页面时，调用 读取方法

    由于 确定收藏与否的 favorite 属性，是在 data 选项上被vue监测的，所以在data 选项上 favorite 是一个立即执行函数

    data:{
        favorite: ( () => {
            // 要读取的对象，key值，默认值
            return loadFromLocal(this.seller.id, ‘favorite‘, false);    
        } )()
    }  

路由切换时，各组件会保持原来的状态

    # 在路由外连上加上  <keep-alive> 即可
    <!-- 路由外链 -->
        <keep-alive>
            <router-view :seller="seller"></router-view>
        </keep-alive>