6.2 添加底部信息组件Footer.vue

然后用同样的方法，添加底部信息栏。
底部信息命名为Foot.vue，下面是它所有的源代码：
1.html部分：
<template>
    <div class="footer hidden-xs">
        <p class="legal"><a href="about.jsp">xxxx网络科技有限公司</a>
        ©2016-{{year}}版权所有.
        <a href="http://beian.miit.gov.cn">粤ICP备09084978号-2</a>
        <br/>
        •Designby
        <a href="http://www.freecsstemplates.org/">FreeCSSTemplates</a>
        •Iconsby
        <a href="http://famfamfam.com/">FAMFAMFAM</a>
        <br/>
        <br/>
        <!--
        <a href="https://webscan.360.cn/index/checkwebsite/url/www.codessp.com.cn"><img border="0" src="https://webscan.360.cn/status/pai/hash/f3b0c2ee2cd93a0be84e68467e9cc187"/>
        </a>
        -->
        </p>
    </div>
</template>
<script>
//script部分在下面
</script>
<style scoped>
/*css部分在下面*/
</style>
2.script部分
这里的year根据Date对象计算出来
export default{
    name:'Footer',
    data(){
        return{
            year:new Date().getFullYear()
        }
    }
}
3.css部分：
div.footer {
    clear: both;
    position: relative;
    padding: 50px 0 30px 0;
    width:100%;
    margin-bottom: 0;
    background: #000;
     z-index: 10;
    bottom: 0;
}
div.footer p {
    margin-bottom: 0em;
    text-align: center;
    line-height: normal;
    font-size: 0.8em;
    color: #BABABA;
}
div.footer a {
    padding: 0 20px;
    text-decoration: none;
    color: #DDDDDD;
}
div.footer a:hover {
    color: #FFFFFF;
}
div.footer .legal a {
    padding: 0;
}

用加入顶部菜单同样的方法，把底部信息加入主页。