在前端的编写中，经常会遇到多个页面共用相同的头部与底部的情况，这个时候重复编写就会使代码变得冗余。如何解决这个问题呢？

     我们可以将头部与底部摘出来放到 /views/components中，然后在需要用到的地方引用。

     引用代码：

<template>        

<!-- 头部 -->

<Header></Header>

<!-- /头部 -->

<!-- 底部 -->

<Footer></Footer>

<!-- /底部 -->

</template>

<script>

import Header from './components/Header'

import Footer from './components/Footer'

export default {

components:{

Header,Footer

}

}

</script>