在Vue中，給頁面添加 CSS 布局非常簡單。下面我們通過一個簡單的例子來演示如何使用Vue CSS來布局網站首頁：

<template><div class="container"><div class="header"><h1>{{title}}</h1><img :src="logo"/></div><div class="content"><h2>歡迎來到我們的網站！</h2><p>這是一個示例網站，使用Vue CSS布局。</p><p>我們將向您展示如何在Vue中使用CSS進行網頁布局。</p></div><div class="footer"><p>? 2021 Vue CSS.</p></div></div></template><style>.container {
width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #454545;
color: #fff;
}
.content {
padding: 20px;
}
.footer {
height: 50px;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
}
h1, h2 {
margin-top: 0;
}
img {
height: 50px;
}
</style>

在上面的代碼中，我們設置了一個容器(div.container)來包含整個頁面。該容器具有固定的寬度，居中對齊，并使用 Flexbox 布局。在容器中，我們使用三個子容器來分別表示頭部、內容和頁腳。頭部使用 Flexbox 布局，居中對齊，擁有自己的樣式。內容的樣式非常簡單，只是為了提高可讀性。頁腳使用 Flexbox 布局，居中對齊，并設置了高度和背景顏色。最后，我們使用了一些通用的 CSS 樣式來指定標題和圖片的樣式。