Vue.js 是一款流行的 JavaScript 框架，它用于構建現代化的 web 應用程序。在 Vue.js 中，我們可以使用組件來構建應用程序，這些組件可重用并適用于不同的頁面。其中，Header 組件和 Footer 組件是在許多網站中常見的組件。Vue.js 也提供了一些內置的組件，例如<header>和<footer>標記，用于構建 Header 和 Footer 組件。

我們可以使用 Vue.js 構建一個簡單的網站，其中包含 Header、Body、Footer 組件。如下所示：

<!-- HTML -->
<div id="app">
<header-component />
<body-component />
<footer-component />
</div>
<!-- JavaScript -->
Vue.component('header-component', {
template: '<header>Header</header>'
})
Vue.component('body-component', {
template: '<p>Body</p>'
})
Vue.component('footer-component', {
template: '<footer>Footer</footer>'
})
new Vue({
el: '#app'
})

在這個例子中，我們定義了三個組件：Header、Body 和 Footer。然后，我們在 HTML 中使用這些組件來構建網站。在 JavaScript 中，我們使用Vue.component方法來定義組件，它需要兩個參數：組件名稱和一個包含組件選項的對象。在這里，我們簡單地使用了template選項來定義組件的模板。最后，我們實例化一個 Vue 對象并將其綁定到 HTML 頁面中的<div>元素。

在 Vue.js 中，組件化設計是一種優雅而有效的方式來構建應用程序。使用 Header 和 Footer 組件，我們可以輕松地構建出具有統一風格和布局的網站。尤其是當我們需要在多個頁面中使用相同的 Header 和 Footer 時，組件化設計可以使得代碼更加易于維護和更新。