7-1 首页header区域的开发

量一下尺寸，宽度是750px，所以它是一个按照iphone6给的一个2倍图的设计稿，在制作页面的时候，就会以2倍图的形式来制作

高度86px

在这个项目中希望使用stylus一个css开发辅助工具，帮助我们去开发我们的网站样式，stylus非常像我们之前了解过的Less或Sass,可以帮助我们在css之中使用一些变量或者micksin这种东西，方便我们快速的编写css代码，如何在我们的项目中使用stylus呢：

cmd，打开项目文件夹

安装几个依赖包

npm install stylus --save   安装到dependencies里面

npm install stylus-loader --save

重新启动项目

npm run start

 

在home下再建一个文件夹components

之前讲过页面组件化的概念，希望把一个复杂的页面拆分成一部分一部分的内容

对于Home这个页面来说，其实Home.vue对应的是整个页面最外层的容器组件，也就是说，它是会被拆分成很多很多小的组件，然后由它来帮助我们整合成一个大的页面，把每一部分拆出来的小的组件就可以放到components这个目录下

创建Header.vue文件

<template>
  <div class="">
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus">

</style>

 

然后考虑如何在Home.vue中使用Header.vue

组件现在已经引入进来了，实际上他是一个局部组件

局部组件如何用：需要在组件下面声明局部组件

当把这个组件引入进来，注册到Home这个组件中之后，就可以在Home的模板里去用这个组件了，如何来用呢

在模板里vue会自动的把大写字母和小写字母做上关联

 

移动端的布局一般采用rem的布局方式

打开assets目录下reset.css

这里把html的font-size设置成了50px，所以rem是相对于50px的尺寸