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