Vue项目首页-header区域开发（7-1）

header区域开发

1. 打开cmd，安装几个依赖包。

cnpm install stylus --save
cnpm install stylus-loader --save
这两个包是干什么的呢？相当于把css样式当模块写。

1. 在index.html，中加入相关代码，防止页面被缩放和放大。
   

2. 创建文件夹，注册并导入组件。
   

3. lang="stylus"导入我们的插件 scoped是指样式只对这个组件生效。
   

样式解析

<style lang="stylus" scoped>
  .header
    display: flex
    line-height: .86rem
    background: #00bcd4
    color: #fff
    .header-left
      width: .64rem
      float: left
    .header-input
      flex: 1
      height: .64rem
      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>