去哪网项目1.header组件的开发

image.png

虚线部分是需要开发的Header组件可以分成3部分,这部分主要是对css的复习和stylus插件的复习。代码上没什么难度。

1.组件的显示

通过路由组件把代码显示在主页上


image.png

这里的app.vue就是显示主页,他的配置在main.js中完成。<router-view>表示显示的是哪个路由下的页面,路由的地址通过地址栏进行修改,或则通过<router-link :to="name">来跳转到相应的路由下
路由的配置如下图所示


image.png

这里引入的三个变量,要注意的就是component,这里的Home其实是es6的简写语法
Home:Home
这里的Home是需要通过import来使用的。这样就做到页面的显示功能。

2.导航栏页面

image.png

这里的home-head就是导航栏组件,我们把首页又拆成了几个小组件进行开发,使用时通过图片中的方式进行引入。


image.png

目前的header组件只是一个简单的css组件,所以我们先对css的内容进行总结

3.主要知识点的总结

1.移动端开发的技巧

image.png

通过测量距离我们可以看出,width是750px,那么这张设计稿其实是以ipone6为模板的移动端设计稿,这就告诉我们,我们在设置标签的大小时,要除以2,例如

虚线框的高度测量出是86px,但是我们在css中要设置成43px。

然后移动端开发的过程中,我们一般使用rem ,em来代替px的使用,实现导入的css文件里对html{font-size}设置成50,这时43px就等于0.86rem,这样就正好等于测量值/100,所以我们可以得出这样一个结论

我们进行移动端开发时,可以将
html{
font-size:100/设计稿的缩放比例(ipone6就是2倍图)
}

这样就可以设置文件内的css为测量值/100rem了。

2.在github的tools中有2个有用的移动端配置项,用来解决移动端300ms延迟问题和1px的边框问题,需要用的时候可以直接在app中进行引用。

2.css的复习

line-height可以使文本居中。
可以通过写一个独立的文件提取公共变量,这样代码就方便维护了


image.png

image.png

图1中,我们可以看到,我们要是想在css中引用外部css
要使用@import“~xxxxxxxxxx”的方式。

推荐阅读更多精彩内容

  • 本文首发于TalkingCoder,一个有逼格的程序员社区。转载请注明出处和作者。 写在前面 本文为系列文章,总共...
    Aresn阅读 8,493评论 0 42
  • 听着exo的《人鱼的眼泪》,开始复习小时候的那个童话故事《美人鱼》。 那个时候看着这个美人鱼的故事,只是记得为王子...
    刘莘静阅读 257评论 0 4
  • 状态调整中,勿念~
    Lin静雅阅读 32评论 2 1
  • 最近在思考一种能够不间断持续积极心态,却又不会生活得太累的办法。 我们总说时间不够用,其实是因为我们通常希望在有限...
    孤单彼岸阅读 30评论 0 0
  • 5月29日,白鹿镇马庙小学提前为孩子们庆祝六一儿童节。 早早的同学们便穿着崭新的衣服,怀着无比激动的心情来...
    15181417659阅读 90评论 0 1