vue高仿餓了麼學習筆記（二）—— 組件拆分

要模仿的界面以下：

 

 1、組件拆分

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