今天會先根據Day1 的設計，將網頁的基礎版型建立出來。
Vue專案建置
我是透過Vite建置工具來建立我的Vue專案，可以參考手把手用Vue建立第一個網站 ，這邊我就不再撰寫一遍了。
Layout建置
我是透過SFC進行開發，所以HTML、JS、CSS都放在同一個檔案裡面。專案裡面會有兩個檔案App.vue及main.js。
main.js主要是根據App.vue創建一個Vue的應用程式，這邊只需要先更改App.vue，將我們設計好的架構放在這個檔案裡面。
Vue檔案的<template>是用來呈現HTML，在此使用HTML5的Layout Element<head>、<main>、<footer>來設計Layout。
在<style>下，定義畫面CSS的高度及背景顏色。
這邊保有專案本來的css設計
@import "./assets/base.css";照理說應該要全部清空自己拉，但是就偷懶一下!
App.vue
<template>
<header>Header
</header>
<main> main
</main>
<footer>footer
</footer>
</template>
<style>
@import "./assets/base.css";
header {
background-color: rgb(255, 174, 0);
height: 80px;
}
main{
height: 820px;
}
footer {
height: 30px;
background-color: rgb(255, 174, 0);
}
成果
看一下在電腦跟手機上的效果如何。發現在手機模式下，footer需要透過滾動軸才能看到，這邊暫時先不調整。等到實際擺放地圖後，再來看看效果如何。
總結
今天先實作了網站的Layout，下次會實作Header的內容，大家也可以跟我一起建立看看唷。