vue高仿饿了么（三）

最新推荐文章于 2020-04-22 19:06:44 发布

allenmu1982

最新推荐文章于 2020-04-22 19:06:44 发布

阅读量181

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ruby ViewUI

原文链接：http://www.cnblogs.com/qianxunpu/p/10017644.html

组件拆分

（1）header组件

有一个static目录，在目录下，放置初始化css样式----reset.css

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* custom */
a {
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}

li {
  list-style: none;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

html, body {
  width: 100%;
}

body {
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

然后在index.html文件里引reset.css

 <link rel="stylesheet" type="text/css" href="static/css/reset.css"/>

（2）index.html代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="static/css/reset.css"/>
    <title>vue-project</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

（3）App.vue代码：

<template>
  <div>
    <v-header :seller="seller"></v-header>  <!--header组件-->
    <div class="tab border-1px">
      <div class="tab-item">
        <router-link :to="{ name :'goods'}" active-class="active">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{ name :'ratings'}" active-class="active">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{ name :'seller'}" active-class="active">商家</router-link>
      </div>
    </div>
    <router-view :seller="seller"></router-view>
  </div>
</template>
<script>
import header from './components/header/header.vue'
const ERR_OK = 0
export default {
  data () {
    return {
      seller: {
      }
    }
  },
  created () {
    this.$http.get('/api/seller').then((response) => {
      response = response.body
      if (response.errno === ERR_OK) {
        this.seller = response.data
      }
    })
  },
  components: {
    'v-header': header
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "./commom/stylus/mixin.styl"
.tab
  display:flex
  width: 100%
  height: 40px
  line-height: 40px
  border-1px(rgba(7,17,27,0.1))
  .tab-item
    flex:1
    text-align:center
    & > a
      display:block
      font-size:14px
      color:rgb(77,85,93)
      &.active
        color: #ffaa66
</style>