3组件骨架开发
Posted U201113877
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3组件骨架开发相关的知识，希望对你有一定的参考价值。
移动端的开发，需要通过<meta>标签设置视口
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
App是挂载在index.html中的<body>元素下的唯一个子元素<div>中的。要使用Vue组件时，在vue文件中要用export default{}导出。在引用这个vue组件的文件中要先用import导入，然后在components中注册。
flex布局是用于设置布局的一个常用属性，在这个项目中.tab的三个子元素是三等分的，用flex布局实现，还有后面很多两个元素并列排布，一个元素固定宽度，另一个元素自适应排布的情况也大量用到了flex布局。vue-load中的postcss插件能自动帮我们搞定css的一些兼容性问题。
用vue-route来实现路由，在main.js用import导入VueRouter，通过 Vue.use() 明确地安装路由功能 Vue.use(VueRouter);
将组件映射到路由的用法：Html部分，使用<router-link>组件来导航，用to属性指定链接，<router-link>默认会被渲染成一个<a>标签，<router-view>是路由出口，路由匹配到的组件会渲染在这里。
<div class="tab-item">
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
<keep-alive>
<router-view :seller="seller"></router-view>
</keep-alive>
在js组件中，要定义路由组件（可从其他文件import进来），定义路由，创建router实例（传入routes配置），创建和挂载根实例
Vue.use(VueRouter);
const routes = [
{path: ‘/goods‘, component: goods},
{path: ‘/ratings‘, component: ratings},
{path: ‘/seller‘, component: seller}
];
const router = new VueRouter({
linkActiveClass: ‘active‘,
routes
});
/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
router,
render: h => h(App)
}).$mount(‘#app‘);
点击区域的设置小技巧。<route.link>中我们设置为display： block，这样字体周围的区域点击后都可以有效跳转。而这个项目之后的内容也用到了设置图标字体的padding来增大有效点击区域。
<router-link>激活是有一个默认的classrouter-link-exact-active，在生成router实例时可以传入参数改变这个class的名称
const router = new VueRouter({
linkActiveClass: ‘active‘,
routes
});
1像素border实现
用border-bottom： 1px solid 设置的话，由于iphone6的dpr是2，在手机上实际显示的是2px的线。要实现真正的1px，可以用伪类after设置1px的border-bottom，然后根据设备的dpr对伪类进行缩放.
在mixin.styl文件中，定义border-1px($color)，利用&:after生成border，但是这个border实际上还不是一像素的。在base.styl中全局定义class border-1px的样式
@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transfrom: scaleY(0.7)
@media(-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transfrom: scaleY(0.5)
在index.styl文件中可以import所有的styl文件，然后在main.js文件中import index.styl文件
import ‘./common/stylus/index.styl‘;
以上是关于3组件骨架开发的主要内容，如果未能解决你的问题，请参考以下文章