基于Vue的WebApp项目开发（三）

 实现根组件通用的头部和底部样式

明白由webpack搭建起来的Vue项目的执行流程，那么就可以知道实现这个需要只要在根组件和入口文件上做“手脚”即可

<!--以后项目的根组件-->
<template>
  <div>
    <!--利用mint-ui中的header组件实现整个系统的头部-->
    <mt-header fixed title="欢迎来到锋商城"></mt-header>

    <!--路由占位符-->
    <router-view></router-view>

    <!--利用mui中的tabbar组件实现系统的底部-->
    <nav class="mui-bar mui-bar-tab">
      <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">会员</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-locked"><span class="mui-badge">0</span></span>
        <span class="mui-tab-label">购物车</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-search"></span>
        <span class="mui-tab-label">搜索</span>
      </a>
    </nav>
  </div>
</template>

<script>
  //负责导出.vue这个组件对象，它本质上是一个Vue对象
  // 所以Vue中该定义的元素都可以使用
  export default {
    data() {
      return {

      }
    },
    methods: {

    },
    created() {

    }
  }
</script>

<style scoped>
  /* 当前页面的CSS样式写到这里，其中scoped表示这个里面
      写的CSS代码知识在当前组件页面上有效，不会影响到其他组件页面
     * */
</style>

View Code