7-1首页header区域开发

首页的整体设计图，依照设计图设计网页：

 量上方盒子的尺寸——用stylus（CSS辅助开发的工具，类似于less或者sass）可以帮助我们在Css中使用变量，方便我们快速编写css代码——通过终端打开项目所在的文件夹，在详谬中安装几个依赖包：

stylus : npm install stylus --save

stylus loader : npm install stylus-loader --save

安装完毕，重新启动项目：npm run start

vue 的基础模板：

<template>
  <div>
    hello world
  </div>
<template>

<script>
  export default {
    name: 'Home'       //给首页大组件取的名字
  }
</script>

<style>
</style>

打开代码，写home首页的头部内容，将复杂组件home.vue拆分成很多小的组件components（在home下面再建立一个文件夹components）打开代码，写home首页的头部内容，将复杂组件home.vue拆分成很多小的组件components（在home下面再建立一个文件夹components）

Home.vue对应的是整个页面最外层的容器组件，被拆分成很多小的组件，再由home.vue来整合成大的页面

在components下面创建一个文件：Header.vue，在模板中设置name:’HomeHeader’

一、如何在大home.vue里面使用header.vue小组件：

1、在<script>标签中引入组件：

import HomeHeader from './components/Header'

2、HomeHeader是一个局部组件，要在组件下面声明局部组件:

export default {
  name: 'Home',
  components: {
    HomeHeader: HomeHeader
  }
}

3、可以在home.vue组件中用HomeHeader组件了：在模板中引入

注意：在第二步HomeHeader是大写的，在模板里面，vue会自动将大写字母和小写字母组成关联，所以HomeHeader对应的就是<home-header>

<template>
  <div>
    <home-header></home-header>
  </div>
</tempalte>

此时在header.vue组件里面写的内容就可以显示到home.vue组件上了，我们写首页头部的内容，实际上就是写header.vue这个组件。

二、写header.vue，即如下：知道整体的布局内容，进行页面上的布局

1、header由三部分组成：header-left、header-input、header-right

<template>
  <div class="header">
    <div class="header-left"></div>
    <div class="header-input"></div>
    <div class="header-right"></div>
  </div>
</tempalte>

2、写页面样式；用lang=”stylus”,同时用scoped来实现对这个组件写的样式不会对其他组件有影响，即样式局部化(比如写的.header类的样式，只在这个组件有作用，其他组件无影响)

写样式用rem：通过html font-size简化了rem的计算（在assets中设置）

1rem = html font-size = 50px

<template>
    <div class="header">
        <div class="header-left">返回</div>
        <div class="header-input">输入城市/景点/游玩主题</div>
        <div class="header-right">城市</div>
    </div>
</template>

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

<style lang="stylus" scoped>
.header
  display: flex
  line-height: 0.86rem
  background: #00bcd4
  color: #fff
  .header-left
    width: .64rem
    float: left 
  .header-input
    flex: 1
    height: .64rem           //设置了line-height，要把height定死
    line-height: .64rem      //上下居中
    margin-top: .12rem       //中间的空白格上下左右由外边距
    margin-left: .2rem
    background: #fff
    border-radius: .1rem     //圆角
    color: #ccc              //字体颜色
  .header-right
    width: 1.24rem
    float: right
    text-align: center
</style>

本节完成的页面设计如下：

本节总结：

CSS：使用flex实现三栏布局；使用float实现浮动；使用margin实现中间框外围的上下左右间距。

Vue：实现分割的小组件联系到大组件上，进而在页面上显示小组件的内容