vue高仿饿了么学习笔记（二）—— 组件拆分

要模仿的界面如下：

 一、组件拆分

1）重设css

在static中新增css/reset.css，样式参考：https://github.com/lwl0812/vue-sell/tree/master/static/css

在index.html中引入reset.css

2）设置移动端的viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

3）重写 App.vue

<template>
  <div id="app">
    <div class="header">
      I am header.
    </div>
    <header></header>
    <div class="tab">
      I am tab.
    </div>
    <div class="content">
      I am content.
    </div>
  </div>
</template>

<script>
　　export defaut {};
</script>

<style>

</style>

4）增加 header 组件

在 components 下新建 header/header.vue，内容如下：

<template>
  <div class="header">
    我是header
  </div>
</template>

<script>
  export default {};
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

编译stylus时会报错，可以安装下stylus，然后重启

npm install stylus --save-dev
npm run dev

5）修改 App.vue

引用header组件

// App.vue
<script>
  import header from './components/header/header';

  export default {
    components: {
      'v-header': header // 此处header与原生html名字相同，所以需要重命名，按es6的语法写的话，只要写header即可，具体参看es6语法
    }
  };
</script>

使用header组件

// App.vue
<template>
  <div id="app">
    <v-header></v-header> <!--使用header组件-->
    <div class="tab">
      I am tab.
    </div>
    <div class="content">
      I am content.
    </div>
  </div>
</template>

 此时，界面如下：

6）增加tab内容

// App.vue
<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab"> <!--tab 内容-->
      <div class="tab-item">商品</div>
      <div class="tab-item">评论</div>
      <div class="tab-item">商家</div>
    </div>
    <div class="content">
      I am content.
    </div>
  </div>
</template>

7）为tab增加样式

// App.vue
<style lang="stylus" rel="stylesheet/stylus">
  .tab
    display: flex
     100%
    height: 40px
    line-height: 40px
    .tab-item
      flex: 1
      text-align: center
</style>

样式使用了flex布局，可参考阮一峰老师的语法篇和实例篇：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

此时，界面如下：

这一节完成，下一节学习vue-router