vue.js template模板的使用(仿饿了么布局)

<template>   <div class="header">     我是header头部  </div> </template> <script type="text/ecmascript-6">   export default {  }; </script><style lang="stylus" rel="stylesheet/stylus">   .header     color:#fff     background:rgba(7,17,27,0.5)     text-align:center     height:40px     line-height:40px </style>goods.vue的代码如下,其他两个类似<template>   <div class="goods">     我是goods组件  </div> </template> <script type="text/ecmascript-6">   export default {  }; </script><style lang="stylus" rel="stylesheet/stylus"> </style>

<template>   <div id="app">     <!--头部组件-->     <v-header></v-header>     <div class="tab border-1px">       <div class="tab-item">         <router-link to="/goods/goods">商品</router-link>       </div>       <div class="tab-item">         <router-link to="/ratings/ratings">评价</router-link>       </div>       <div class="tab-item">         <router-link to="/seller/seller">商家</router-link>       </div>     </div>     <!-- keep-alive:缓存所有的页面,防止重复渲染DOM -->     <keep-alive>       <router-view></router-view>     </keep-alive>   </div> </template> <script type="text/ecmascript-6">   // 引人组件  import header from '@/components/header/header';   export default {     components: {       'v-header': header     }   }; </script><style lang="stylus" rel="stylesheet/stylus">   @import "./common/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-weight:700         text-decoration:none         font-size:14px         color:rgb(77,85,93)         &.active           color:yellow </style>

import Vue from 'vue'; import VueRouter from 'vue-router'; import VueResource from 'vue-resource'; //引入自定义的组件import Goods from '@/components/goods/goods'; import Ratings from '@/components/ratings/ratings'; import Seller from '@/components/seller/seller';Vue.use(VueRouter); Vue.use(VueResource);const routers = [{   path:'/goods/goods',   name:'goods',   component:Goods },{   path:'/ratings/ratings',   name:'ratings',   component:Ratings },{   path:'/seller/seller',   name:'seller',   component:Seller }];const router =new VueRouter({   mode:'history', //如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。   routes:routers,   linkActiveClass : 'active' // 设置 链接激活时使用的 CSS 类名,默认值: "router-link-active" }); export default router;