Vue project homepage-header area development (7-1)

header area development

1. Open cmd and install several dependent packages.

cnpm install stylus --save
cnpm install stylus-loader --save
What do these two packages do? It is equivalent to writing the css style as a module.

1. In index.html, add relevant code to prevent the page from being zoomed and enlarged.
   

2. Create folders, register and import components.
   

3. lang="stylus" importing our plugin scoped means that the style is only effective for this component.
   

Style analysis

<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>