首页header区域的开发

1. Stylus
CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。现在最为普遍CSS预处理器主要有三种：Sass、Less CSS、Stylus。详细的内容见https://www.oschina.net/question/12_44255?sort=default&p=4
– 我们的项目中要用到stylus，首先安装stylus的依赖包：
首页header区域的开发
– 安装stylus-loader的依赖包

– 然后重新启动项目—cnpm run dev

2. Header的开发

在src目录下新建pages文件夹，在pages文件夹中新建home文件夹；
在home文件夹下新建components文件夹，Home.vue是最外层的大组件；由components里一系列的小组件组成；
在components里创建Header.vue，取名为HomeHeader；
在Home.vue中引入该局部组件：vue里会自动将组件大小写做关联；
在路由文件index.js中引入Home组件，这样我们访问根路径的时候就会显示Home组件的渲染内容；
至此我们写头部的内容就是在写header这个文件；

3. 移动端的布局
– 先设计模板样式：

– 我们引入stylus来设计样式：在这里要进行一个单位的换算，从px换算成rem，要考虑到我们下面这两条规则
规定：
1rem等于html根元素设定的font-size的px值。
设计师给的是二倍尺寸的图片，所以记得所有的量出来的尺寸要除以二，然后再换算成rem单位。
本项目中1rem = html font-size = 50px，换算成rem单位的时候直接在原设计尺寸除以100就可以了：

<style lang="stylus" scoped>
  .header
    display: flex
    line-height: $headerHeight
    background: $bgColor
    color: #ffffff
    .header-left
      width: .64rem
      float: left
      .back-icon
        text-align: center
        font-size: .4rem
    .header-input
      flex: 1
      height: .64rem
      line-height: .64rem  /*.86-(.12)rem*/
      margin-top: .12rem
      margin-left: .2rem
      padding-left: .2rem
      background: #ffffff
      color: #ccc
      border-radius: .1rem
    .header-right
      min-width: 1.04rem
      padding: 0 .1rem
      float: right
      text-align: center
      color: #fff
      .arrow-icon
        font-size: .24rem
        margin-left: -.04rem
</style>

页面效果：
首页header区域的开发
4. flex布局
简单了解一下flex布局，又意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。利用flex布局，可以实现垂直居中(display：flex；flex-direction：column；justify-content：center;)等特殊布局效果。采用flex布局的元素，称为flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为flex项目，简称“项目”。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写。如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
下面列出他们设置在容器上的6个属性：

flex-grow	flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
flex-shrink	flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
flex-basis	项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。
inherit	从父元素继承该属性。

其中 flex: 1；能实现让所有弹性盒模型容器的子元素都有相同的长度，且忽略它们内部的内容。相当于flex: 1 1 0%。类似下图的效果：
首页header区域的开发
5. iconfont的使用和代码优化
配置
– 到iconfont官网登录加需要的图标到购物车，然后添加至项目：

– 点击下载至本地并解压，在assets里面新建iconfont文件夹，把解压当中有用的文件粘贴到文件夹去（.svg/.eot/.ttf/.woff），把iconfont.css放到styles文件夹当中。
– 然后main.js中引入iconfont.css：
首页header区域的开发
使用
首先复制与图标相对应的十六进制的字符串，粘到组件的模板中：

同样的，处理其他的图标：

最后页面显示为：

6. 代码的优化

定义变量，将常用的样式（比如常用的颜色）放在变量里，可以方便对全局修改，增强代码的可维护性。在styles文件夹下创建varibles.styl文件，设置常用的背景颜色，接下来在任意一个组件中就可以用$bgColor代表#00bcd4这个颜色了。

设置好后，在Header组件中使用：先引入变量文件，然后用变量替换掉样式：
引入变量文件还可以利用@符号，“@”表示src文件，但是在样式中引入样式需要在@前面加“~”。所以还可以写成：
styles目录常常被使用，所以可以给styles起个别名，像是“@”可以表示src目录一样：

找到webpack.base.conf.js目录，按照同样的方法给styles目录起一个别名：

然后将代码中用到此目录的都修改为别名styles就可以了。
重启项目。

7. 同步到线上
指令：

git add .
git commit -m add_header
git push