付費限定文章

[4] Vue 頁面結構

在寫頁面之前，先來介紹 Vue 頁面結構。

首先先在 src/components 底下建立一個 home.vue

跟寫一個 html 頁面很像，一樣是分成 寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。

就是相當於原生 html 檔內 html 標籤的部分，我是習慣下一個最外層的 div 去控制整個頁面的樣式。

要使用 typescript，所以設定 lang="ts"

你看 script 標籤內有一個 setup，這個是 setup 語法糖，是 Vue 3.2 版開始推出的新功能，這玩意兒出現之後，Vue 瞬間變得超級好寫，更加直覺。