组件拆分
在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)
查看项目完整代码
