6.1 创建顶部菜单组件Header.vue

接下来，我们就要在示例项目的基础上，添加自己的页面。我们使用上部菜单，中间内容分栏，底部信息的布局，就如本网站的学习页面。
其中，顶部和底部是所有页面（如果有多个页面的话）所共享，所以做成组件是很自然的。
首先我们来创建顶部菜单组件。
1.创建Header.vue
在src/components文件夹下，创建新文件Header.vue。
这是一个空白的文件，首先输入template这对标签，这里是组件的html模板的位置。然后把下面的代码复制进去：
<template>
    <div class="header">
        <div class="menu col-sm-5">
            <ul>
                <li class="current_page_item"><router-link to="/">主页</router-link>
                </li>
                <li class="current_page_item"><router-link to="/about">About</router-link>
                </li>
                <li><router-link to="/study">学习</router-link>
                </li>
                <li class="dropdown"><router-link to="#" class="dropdown-toggle" id="dropdownMenul" data-toggle="dropdown">课程<span class="caret"></span>
                </router-link>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenul">
                    <li><router-link to="1_010000.html">Java程序设计</router-link>
                    </li>
                </ul>
                </li>
                <li><router-link to="statistics.jsp">统计</router-link>
                </li>
            </ul>
        </div>
        <div class="nickname hidden-xs col-sm-2 text-center">
            <span class="text-info">你好，xxx，</span>
            <router-link to="logout.jsp">
            退出
            </router-link>
        </div>
        <div class="logo hidden-xs col-sm-5 text-right">
            <h1><router-link to="javascript:void(0)"><span class="java">JavaWeb</span>
            学习平台
            <img alt="\" height="40" src="images/codessp.png"/>
            </router-link>
            </h1>
        </div>
    </div>
</template>

这是本网站顶部菜单的简化版本。
2.修改App.vue
由于顶部菜单是本网站所有页面都有的，所以我们可以把刚刚创建的Header组件放在App.vue里。这是修改后的App.vue的template部分：
<template>
    <div id="app">
        <Header/>
        <img src="@/assets/logo.png"/>
        <router-view/>
    </div>
</template>
仅仅是再template部分插入了Header这个组件，这样还是无法显示，我们需要指定Header到底在哪里，这需要在script标签里面导入并且在components里面声明：
import Header from "@/components/Header.vue";
export default{
    name:"App",
    components:{
        Header,
    },
}
第一行代码是引用，相当于指定Header组件在哪里。@符号代表src文件夹。
然后添加的第4、5行代码，表示本页面使用的组件。如果没有这两行代码，会报出语法错误，提示声明了Header但并没有使用！
保存后，就可以看到菜单的内容了，但由于没有格式，所以看起来还是很混乱的。

3.加入css部分。
首先在Header加入css，加入style标签（scoped表示这部分是专属Header使用的css），类似这样
然后把下面所有css规则复制到style标签内。
h1{
     letter-spacing:-1px;
     font-size:2.2em;
     font-family:Verdana,Arial,Helvetica,sans-serif;
     margin-top:0;
}
h2{
     letter-spacing:-1px;
     font-size:2em;
}
h3{
     font-size:1em;
}
.dropdown-menu li{
     display:block;
     width:180px;
     border-radius:3px;
}
.dropdown-menu li a{
     text-align:left;
}
.dropdown-menu{
     background:#2e2b25;
}
div.header{
     height:53px;
     background:#000;
     line-height:38px;
}
div.logo h1 a,div.logo p{
     float:right;
     position:relative;
     right:30px;
     text-transform:lowercase;
     font-family:"微软雅黑";
     color:#fff;
     padding:5px;
     display:block;
     font-weight:bold;
}
div.logo p{
     margin:0;
     padding:14px 0 0 4px;
     line-height:normal;
     font-family:Verdana,Arial,Helvetica,sans-serif;
     font-size:14px;
}
.java{
     color:#95142a;
     font-family:couriernew;
}
div.logo a{
     text-decoration:none;
     color:#d0c7a6;
}
.menu,.logo,.nickname{
     padding-left:0;
     padding-right:0;
}
div.menu ul{
     margin:0;
     padding:0;
     list-style:none;
}
div.menu li{
     display:block;
     float:left;
     height:52px;
}
div.menu a{
     height:52px;
     display:block;
     padding:0 20px 0px 20px;
     text-decoration:none;
     text-align:center;
     text-transform:lowercase;
     font-family:Verdana,Arial,Helvetica,sans-serif;
     font-weight:bold;
     font-size:14px;
     color:#cec5a4;
     line-height:52px;
}
div.menu.last{
     margin-right:20px;
}
div.menua:hover{
     color:#000;
     background:#ccc;
}
div.menu.current_page_itemA{
     color:orange;
}
div.nickname{
     line-height:52px;
     height:52px;
}
#nav{
     padding:30px;
}
#nav a{
     font-weight:bold;
     color:#2c3e50;
}
#nava.router-link-exact-active{
     color:#42b983;
}

4.加入全局css框架
菜单的布局使用了bootstrap框架，这是一个css框架。
这个css文件的下载地址为：bootstrap
下载此文件，然后保存到文件夹public/css下。我们需要在主页index.html（位于项目根目录下，或者public文件夹内）的head标签里面加入此链接：
<link rel="stylesheet" href="css/bootstrap.min.css" />
类似这样：
保存后刷新网页，就可以看到新增加了菜单！