Vue.js高仿饿了么外卖App 2016最火前端框架(17h)

作者: 一人一心 | 来源:发表于2018-01-18 15:42 被阅读325次

vue饿了么学习--mock数据
Vue.js高仿饿了么外卖App 2016最火前端框架(17h)
Vue.js高仿饿了么外卖App 2016最火前端框架(17h)
基于vue2.5.2的APP商家页面项目总结
Vue.js高仿饿了么外卖App之嵌套路由
Vue-基础语法
可能是目前最完整的前端框架 Vue.js 全面介绍
学习vue (1)
Vue基础
Vue(1)

1. @2x.png和@3x.png图片的scss样式写法。

@mixin bg-image($url){
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3){
    background-image: url($url + "@3x.png")
  }
}

2. 自己亲自动手写的Icon组件。

组件目录结构如下：

Icon.vue

<template>
  <span class="icon" :class="['icon_'+kind, iconCls]"></span>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      }
    },
    props: {
      iconClsNum: {
        type: Number,
        required: true
      },
      kind: {
        type: Number,
        default: 1
      }
    }，
    computed: {
      iconCls() {
        return this.classMap[this.iconClsNum]
      }
    }
  }
</script>

<style lang="scss">
  @import "../../common/scss/mixin";
  .icon {
    display: inline-block;
    vertical-align: top;
    background-repeat: no-repeat;
    &.icon_1 {
      width: 12px;
      height: 12px;
      background-size: 12px 12px;
      &.decrease {
        @include bg-image('img/decrease_1');
      }
      &.discount {
        @include bg-image('img/discount_1');
      }
      &.guarantee {
        @include bg-image('img/guarantee_1');
      }
      &.invoice {
        @include bg-image('img/invoice_1');
      }
      &.special {
        @include bg-image('img/special_1');
      }
    }
    &.icon_2 {
      width: 16px;
      height: 16px;
      background-size: 16px 16px;
      &.decrease {
        @include bg-image('img/decrease_2');
      }
      &.discount {
        @include bg-image('img/discount_2');
      }
      &.guarantee {
        @include bg-image('img/guarantee_2');
      }
      &.invoice {
        @include bg-image('img/invoice_2');
      }
      &.special {
        @include bg-image('img/special_2');
      }
    }
    &.icon_3 {
      width: 12px;
      height: 12px;
      background-size: 12px 12px;
      &.decrease {
        @include bg-image('img/decrease_3');
      }
      &.discount {
        @include bg-image('img/discount_3');
      }
      &.guarantee {
        @include bg-image('img/guarantee_3');
      }
      &.invoice {
        @include bg-image('img/invoice_3');
      }
      &.special {
        @include bg-image('img/special_3');
      }
    }
    &.icon_4 {
      width: 16px;
      height: 16px;
      background-size: 16px 16px;
      &.decrease {
        @include bg-image('img/decrease_4');
      }
      &.discount {
        @include bg-image('img/discount_4');
      }
      &.guarantee {
        @include bg-image('img/guarantee_4');
      }
      &.invoice {
        @include bg-image('img/invoice_4');
      }
      &.special {
        @include bg-image('img/special_4');
      }
    }
  }
</style>

引用方法如下

<div v-if="seller.supports" class="support">
  <icon :kind="1" :iconClsNum="seller.supports[0].type"></icon>
   <span class="text">{{seller.supports[0].description}}</span>
</div>

3. Sticky footers布局。

Sticky footers的概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。关注详情，可参考 CSS秘密花园： Sticky footers。
在sell app中，使用的sticky footers的技术要点汇总如下。
sell app 中html代码如下

<div class="detail ">
  <div class="detail-wrapper clearfix">
    <div class="detail-main">
    </div>
  </div>
  <div class="detail-close">
    <i class="icon-close"></div>
  </div>
</div>

sell app中scss代码如下

.detail{
  position: fixed;
  z-index: 100;
  top: 0 ;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(7, 17, 27, .8);
  overflow: auto;
  .detail-wrapper{
    min-height: 100%;
    .detail-main{
      margin-top: 64px;
      padding-bottom: 64px;
    }
  }
  .detail-close{
    position: relative;
    margin-top: -64px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    clear: both;
  }
}

在 sell app 中使用的sticky footer的关键技术点是 .detail 样式中 w100% ,h100% ,overflow: auto; 在 .detail-wrapper 加上一个清除浮动的.clearfix并且给它设置一个最小高度100%。.detail-main样式里要预留一个padding-bottom: 64px。在.detail-close样式里通过设置position：relative;和margin-top: -64px;来实现。以上代码是我理解后在简书里一气呵成默敲出来的。

4. 评星组件。

组件目录结构

Star.vue 源码如下(以下所有代码凭借记忆和理解后逐字敲打完成，中间过程没有看一眼源码,敲打间几乎没有停顿。目录结构教视频中的略有不同，样式做了进一步一点点的优化)：

<template>
  <div class="star" :class="starType">
    <span class="star-item" v-for="(itemClass, index) in itemClasses" :class="itemClass" :key="index"></span>
  </div>
</template>

<script type="text/ecmascript-6">
  const LENGTH = 5
  const CLS_ON = 'on'
  const CLS_OFF = 'off'
  const CLS_HALR = 'half'
  export default {
    props: {
      size: {
        type: Number
      },
      scores: {
        type: Number
      }
    },
    computed: {
      starType() {
        return 'star-' + this.size
      },
      itemClasses() {
        let result = []
        let score = Math.floor(this.scores * 2) / 2
        let hasDecimal = score % 1 !== 0
        let integer = Math.floor(score)
        for (let i = 0; i < integer; i++) {
          result.push(CLS_ON)
        }
        if (hasDecimal) {
          result.push(CLS_HALR)
        }
        while (result.length < LENGTH) {
          result.push(CLS_OFF)
        }
        return result
      }
    }
  }
</script>

<style lang="scss">
  @mixin bg-image($url) {
    background-image: url($url + '@2x.png');
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
      background-image: url($url + '@3x.png');
    }
  }

  .star {
    font-size: 0;
    .star-item {
      display: inline-block;
      background-repeat: no-repeat;
      &:last-child {
        margin-right: 0;
      }
    }
    &.star-24 {
      .star-item {
        width: 10px;
        height: 10px;
        background-size: 10px 10px;
        margin-right: 3px;
        &.on {
          @include bg-image('img/star24_on')
        }
        &.off {
          @include bg-image('img/star24_off')
        }
        &.half {
          @include bg-image('img/star24_half')
        }
      }
    }
    &.star-36 {
      .star-item {
        width: 15px;
        height: 15px;
        background-size: 15px 15px;
        margin-right: 6px;
        &.on {
          @include bg-image('img/star36_on')
        }
        &.off {
          @include bg-image('img/star36_off')
        }
        &.half {
          @include bg-image('img/star36_half')
        }
      }
    }
    &.star-48 {
      .star-item {
        width: 20px;
        height: 20px;
        background-size: 20px 20px;
        margin-right: 22px;
        &.on {
          @include bg-image('img/star48_on')
        }
        &.off {
          @include bg-image('img/star48_off')
        }
        &.half {
          @include bg-image('img/star48_half')
        }
      }
    }
  }
</style>

使用时可以通过 <div class="star-wrapper"></div> 包裹来控制外层样式。

5. Title组件。

Title.vue:

<template>
  <div>
    <div class="title">
      <div class="line"></div>
      <div class="text">{{cont}}</div>
      <div class="line"></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      cont: {
        type: String,
        required: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../common/scss/mixin';
  .title{
    display: flex;
    .line{
      flex: 1;
      position: relative;
      top: -6px;
      @include border-bottom-1px(rgba(255, 255, 255, .2));
    }
    .text{
      font-size: 14px;
      line-height: 14px;
      font-weight: 700;
      padding: 0 12px;
    }
  }
</style>

使用时，可以通过 <div class="title-wrapper"> <v-title cont="优惠信息"></v-title> </div> 外层的.title-wrapper控制外层样式。.title-wrapper{ margin: 28px 36px 24px; }。因为，cont接收的type被限制成String。所以在给cont赋值时，因为给的直接是字符串，所以不可以给cont加 : 赋值。

6. WebStorm快捷键 `command + alt + t` 可以在外层写包裹的代码。

7. transition动画。可以参考transition详解。

7.1 使用方法： transtion包裹动画块区域。然后，再写 .fade-enter . fade-enter-active .fade-leave-active .fade-leave-to的样式。
scss代码块如下：

...
opacity: 1;
background-color: rgba(7, 17, 27, .8);
&.fade-enter,
&.fade-leave-to{
        opacity: 0;
        background-color: rgba(7, 17, 27, 0);
}
&.fade-enter-active,
&.fade-leave-active{
   transition: all .5s;
}
...

vue饿了么学习--mock数据
最近在看《Vue.js高仿饿了么外卖App 最火前端框架 1.0升级2.0-慕课网》的视频，这个视频使用的是vue...
Vue.js高仿饿了么外卖App 2016最火前端框架(17h)
@2x 、@3x 的png小图片，拆分成单个。webpack在编译它们的时候会生成base64，这样一个图片请求都...
Vue.js高仿饿了么外卖App 2016最火前端框架(17h)
1. @2x.png和@3x.png图片的scss样式写法。 2. 自己亲自动手写的Icon组件。组件目录结构如...
基于vue2.5.2的APP商家页面项目总结
最近学了一点vue.js，并且根据教程做了一个类似饿了么的APP商家页面。vue.js作为现在很火的一个前端框架，...
Vue.js高仿饿了么外卖App之嵌套路由
Vue.js高仿饿了么外卖App实战中，讲师的Vue版本是2.2.1，而最新安装的是2.2.6版本。创建一个基于...
Vue-基础语法
什么是Vue.js？ ☛Vue.js是目前最火的一个前端框架。React是最流行的前端框架（都可以进行手机App的...
可能是目前最完整的前端框架 Vue.js 全面介绍
摘要: 2016年最火的前端框架当属Vue.js了，很多使用过vue的程序员这样评价它，“vue.js兼具angu...
学习vue (1)
什么是Vue.js Vue.js 是目前最火的一个前端框架，React 是最流行的一个前端框架 Vue.js 是前...
Vue基础
### 什么是Vue.js + Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（Reac...
Vue(1)
什么是Vue.js? Vue.js是目前最火的前端框架，而React.js是当下最流行的前端框架，我们可以使用Re...