在我們今天進入程式前先來看看專案的架構吧～
vite-project/：你的專案根目錄（下面所有東西都在這裡）。index.html：整個網站的起點（入口 HTML）。Vite 會從這裡載入 src/main.js。src/：程式碼主戰場（Vue 元件、CSS、JS 都放這）。public/：放「不需要打包處理」的靜態資源（例如 favicon、公開圖片）。打包時會原封不動搬到輸出資料夾。vite.config.js：Vite 的設定檔（例如加插件、調整路徑）。package.json：這個專案用到哪些套件、有哪些指令（scripts）。package-lock.json：鎖定套件版本，確保每次安裝結果一致。node_modules/：所有下載好的套件（超大，別上傳 GitHub）。.gitignore：告訴 Git 這些東西不要加入版本控制（像 node_modules/）。.vscode/（可選）：VS Code 的工作區設定（不影響程式運作）。index.html 啟動 → main.js 掛載 → App.vue 負責畫面。{{ message }}）index.html（根目錄）<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Vue</title>
</head>
<body>
<div id="app"></div>
<!-- Vite 會從這裡載入你的程式 -->
<script type="module" src="/src/main.js"></script>
</body>
</html>
解釋<div id="app">{{ message }}</div>：
這是一個空的 HTML 區塊，裡面放了 {{ message }}。在純 HTML 裡，{{ message }} 不會顯示東西，它只是字串。
src/main.jsimport { createApp } from 'vue'
import App from './App.vue'
import './style.css' // 沒有可以先略過
createApp(App).mount('#app')
解釋createApp(App).mount('#app'):
createApp 是 Vue 3 的 API，意思是「建立一個 Vue 應用」。
.mount('#app') 表示「把這個 Vue 應用掛到 id 為 app 的 DOM 上」。
從這一刻開始，#app 裡的畫面就由 Vue 接管。
src/App.vue{{ message }}）：<template>
<main class="wrap">
<h1>🚀 Hello Vue!</h1>
<p>{{ message }}</p>
</main>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('第一顆信號彈發射成功！')
</script>
<style scoped>
.wrap { max-width: 720px; margin: 48px auto; line-height: 1.7; }
</style>
ref 是 Vue 提供的響應式 API，表示一個「可變的資料」。
當 message 這個變數被改變時，Vue 會自動幫你更新畫面裡的 {{ message }}。
src/style.css
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system; }
npm install
npm run dev
我們完成第一個程式練習了！
🚀 今天我們成功發射了第一顆信號彈，畫面上出現了屬於 Vue 的第一個訊號。
但如果整個宇宙只有一顆信號，那就太孤單了。明天我們要飛往「組件星雲」，探索如何建立更多小星球（元件），並讓它們彼此溝通（props、emit），一起拼出更壯闊的宇宙。
參考資源
https://vuejs.org/guide
https://www.runoob.com/vue3
iThome鐵人賽
看影片追技術