组件拆分
（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 { 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 { 5px; background-color: rgba(125, 125, 125, 0.7); -webkit-border-radius: 6px; } html, body { 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 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>