Vue.js 2.5 + cube-ui 重构饿了么 App（知识总结--完善中）

css3的 -webkit-min-device-pixel-ratio属性

设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素

-webkit-min-device-pixel-ratio: 1.5
是指当时显示屏最小的色倍为1.5倍的

例如iPhone4S，分辨率为：960×640，取屏幕宽度计算，物理像素640px，设备独立像素320px，那么，devicePixelRatio
值为 640px / 320px = 2，又如iPhone3，计算出来的 devicePixelRatio 值为 320px / 320px
= 1

我们主要通过：通过判断 devicePixelRatio 的值来加载不同尺寸的图片
针对普通显示屏(devicePixelRatio = 1.0、1.3)，加载一张 1 倍的图片
针对高清显示屏(devicePixelRatio >= 1.5、2.0、3.0)，加载一张 2 倍大的图片

mixin 的用法

作用： 混合机制–mixins，用来更高效的实现组件内容的复用

mixin与组件引用的区别
单纯组件
引用：组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。
模式：父组件 + 子组件 >>> 父组件 + 子组件

mixin
引用： 在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了
模式： 父组件 + 子组件 >>> new父组件

mixin引用优点
多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。

案例：
（1）创建mixin文件【如js文件，mixin.js】

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
  this.init()
 },
 mounted() {},
 methods: {
 	init() {
 		console.log('init function')
 	}
 }
}

（2）应用

import '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

移动端关于@2x与@3x的适配（基于vue.js+stylus）

分析： @2x与@3x图样式多个页面共享，因此采用mixin技术更加的灵活
实现
（1）创建mixin.styl

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）文件引入如 index.vue

<span :class="classMap['yellow']" class="icon"/>

export default{
	created() {
		this.classMap = ['red', 'yellow', 'green']
    }
}

<style lang="stylus" scoped>
	.icon{
	 	&.red{
           bg-image(filepath)
        }
        &.yellow{
           bg-image(filepath)
        }
        &.green{
          bg-image(filepath)
        }
	}
</style>

1像素边框问题

在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。

移动端1px解决方案（vue + stylus）

 vue文件
<div class="tab border-1px">
     content
</div>

<style lang="stylus" scoped>
// mixin  path
@import "./common/stylus/mixin.styl"
.tab{
  border-1px(rgba(7, 17, 27, 0.1))
 }
</style>

mixin.css 文件
border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    width: 100%
    left: 0
    bottom: 0
    border-top: 1px solid $color
    content: ' '

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

【注】mixin在main.js文件中引用

推荐三篇文章
（1）移动端1像素边框问题： https://www.jianshu.com/p/fa670b737a29
（2）设计稿的100%还原-「REM」引发的思考 https://www.jianshu.com/p/1b13889c80f5
（3）设备像素比devicePixelRatio简单介绍https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

Sticky footer 布局

我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时，页脚能随着文档流撑开始终显示在页面的最下方。这就是传说中的Sticky footer布局。

Sticky footer布局实现

<!--sticky footer 设计样式 clearfix为重点-->
<div class="detail">
      <div class="detail-wrapper clearfix">
        <div class="detail-main">
          content 内容越长越较易测试
        </div>
      </div>
      
      <div class="detail-close" @click="hideDetail">
        footer
      </div>
</div>

<style lang="stylus" scoped>
.detail {
 position: fixed
  z-index: 100
  top: 0
  left: 0
  width: 100%
  height: 100%
  overflow: auto
  background: rgba(7, 17, 27, 0.8)
  .detail-wrapper{
    width: 100%
    min-height: 100%
    .detail-main{
      margin-top: 64px
      padding-bottom: 64px
    }
  }
  .detail-close{
     position: relative
     width 32px
     height 32px
     margin: -50px auto 0 auto
     clear: both
   }
}
</style>

mixin.css 设计 clearfix样式
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

.clearfix
  display: inline-block
  &:after
    display: block
    content: "."
    height: 0
    line-height: 0
    clear: both
    visibility: hidden

推荐
clearfix（清除浮动）https://blog.csdn.net/weixin_41041379/article/details/81871980