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

image.png

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

1.组件的显示

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

image.png

这里的app.vue就是显示主页，他的配置在main.js中完成。表示显示的是哪个路由下的页面，路由的地址通过地址栏进行修改，或则通过来跳转到相应的路由下
路由的配置如下图所示

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”的方式。