使用vue-cli编写外卖app【骨架开发】

组件拆分

在cssreset官网上下载reset.css引入到index.html中，设置viewport

<meta name="viewport"
          content="width-device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="static/css/reset.css">

在app中编写三个子组件代表三个主区块：
header/tab/content

Vue-router

安装

npm install vue-router --save

基本配置

【main.js】

Vue.use(VueRouter)
let app = Vue.extend(App)
let router = new VueRouter()
router.map({
    '/goods': {
        component: goods
    },
    '/ratings': {
        component: ratings
    },
    '/seller': {
        component: seller
    }
})

router.start(app, '#app')//挂载点
router.go('/goods')//默认进入goods

使用

【app.vue】

<a v-link="{path:'/goods'}">商品</a>
...

其他配置

在实例化router时可以传入一些options，比如

let router = new VueRouter({
    linkActiveClass: 'active'
})//在路由上定义一个‘active’的类

border像素的实现

由于设备的不同，1px的border在pc端可以正常显示，而在移动端可能显示为2px。物理像素为设备像素的两倍。

解决方案是增加一个伪类after，设置为一条线，在dpi=2的设备上，通过meter query 做一个缩放，可以达到1px的效果。

在【stylus】文件夹下新建一个【mixin.styl】，他的作用作为一个css预处理器是通过定义一个函数。代码如下：

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

想要实现一个类，能根据设备不同dpi进行不同的处理，新建【base.styl】，代码如下：

//希望他根据不同的dpi去缩放
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform :scaleY(0.7) //1.5*0.7接近于1
      transform :scaleY(0.7)

查看项目完整代码