我們的第一個 SFC 網頁
要從頭開始建立我們的第一個 SFC 網頁，我們將
- 建立一個新的乾淨的 Vue 專案
- 在 'App.vue' 檔案中編寫程式碼
- 檢視開發過程中網頁如何自動更新
- 構建頁面以供生產使用
建立一個乾淨的專案
現在我們將刪除上一頁中建立的示例專案中的所有內容，以便在 Vue 中建立我們自己的簡單網頁。
在我們開始編寫程式碼之前，請刪除 <template>、<script> 和 <style> 標籤內的所有內容，並刪除 'setup' 或 'scoped' 等任何屬性。
您的 'App.vue' 檔案現在看起來應該像這樣
App.vue
<script></script>
<template></template>
<style></style>同時刪除 'src' 資料夾內的 'assets' 和 'components' 資料夾。
刪除 'main.js' 檔案中匯入資源的行，使 'main.js' 看起來像這樣
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')現在我們有了一個空的可用專案。
在 'App.vue' 中編寫程式碼
現在我們有了一個乾淨的專案，在 <template> 標籤內新增一個標題，如下所示
<template>
<h1>Hello World!</h1>
</template>
<script></script>
<style></style>儲存 'App.vue' 檔案，透過終端中的 localhost 連結在瀏覽器中檢視。您看到結果了嗎？每次在 VS Code 中儲存更改時，瀏覽器都應該自動更新，而無需手動重新整理瀏覽器。
現在讓我們來看一個稍大一些的 Vue 示例
示例
App.vue:
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'This is some text'
};
}
};
</script>
<style></style>注意： 在上面的示例中，export default 使 'main.js' 能夠使用 import App from './App.vue' 來捕獲資料，以便它可以掛載到 'index.html' 中的 <div id="app"> 標籤。
