LESSON-19 · solution
這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、style.css、main.js
本堂焦點：用 Vue 3 CDN 建立 createApp、setup 與 mount 的最小流程
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：先對照差異，再檢查 在 index.html 的「Vue CDN script」對照這項變更：<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="main.js" defer></script>
貼上位置：index.html 的 Vue CDN script 區塊
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="main.js" defer></script>預期結果：Network 有 Vue CDN，main.js 不再出現 Vue is not defined。
驗收證據：Network CDN 狀態與 Console 的 Vue 物件。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 main.js 的「createApp setup」對照這項變更：const app = Vue.createApp({
setup() {
const title = "安心維護服務";
const description = "讓訪客看懂下一步";
return { title, description };
},
});
貼上位置：main.js 的 createApp setup 區塊
const app = Vue.createApp({
setup() {
const title = "安心維護服務";
const description = "讓訪客看懂下一步";
return { title, description };
},
});預期結果：#app 顯示 setup 回傳的 title 與 description，程式不需要先使用 ref。
驗收證據：畫面文字、main.js 的 setup return、Vue CDN 與 #app DOM。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 index.html 的「#app」對照這項變更：<h1>{{ title }}</h1>
<p>{{ description }}</p>
貼上位置：index.html 的 #app 區塊
<h1>{{ title }}</h1>
<p>{{ description }}</p>預期結果：#app 內的 Vue template 被渲染，而不是把大括號原樣顯示。
驗收證據：Elements 只有一個 #app，內部出現實際文字。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 main.js 的「app.mount」對照這項變更：app.mount("#app");
貼上位置：main.js 的 app.mount 區塊
app.mount("#app");預期結果：#app 內不再顯示原始 template 語法。
驗收證據：畫面、#app DOM 與 Console 無 mount 相關錯誤。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.htmlVue DOM template：提供唯一 #app、靜態 title／description 與位於容器外的 script。style.css呈現層：控制容器、文字、狀態區、focus 與窄版可讀性。main.jsVue 啟動流程：依序觀察 global API、createApp、setup、return 與 mount。index.htmlVue DOM template：提供唯一 #app、靜態 title／description 與位於容器外的 script。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LESSON-19｜Vue 3 CDN：solution</title>
<link rel="icon" href="../../../assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main id="app" class="page-shell">
<p class="eyebrow">LESSON-19 · Vue 3 CDN</p>
<h1>{{ title }}</h1>
<p class="page-description">{{ description }}</p>
<p class="status-panel">Vue template 已準備好，請觀察 mount 前後的差異。</p>
</main>
<script src="https://unpkg.com/vue@3.5.40/dist/vue.global.js"></script>
<script src="main.js" defer></script>
</body>
</html>style.css呈現層：控制容器、文字、狀態區、focus 與窄版可讀性。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
:root {
font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif;
color: #17324d;
background: #f5f8fb;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.page-shell { width: min(100% - 2rem, 760px); margin: 2rem auto; padding: 2rem; border: 1px solid #cbd8e4; border-radius: 20px; background: #fff; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .05em; }
.page-description { color: #52657d; }
.status-panel { min-height: 2rem; padding: .8rem; border-radius: 10px; background: #e8f5f7; color: #17643d; font-weight: 700; }
a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
@media (max-width: 560px) { .page-shell { margin: 1rem auto; padding: 1rem; } h1 { font-size: 1.6rem; } }main.jsVue 啟動流程：依序觀察 global API、createApp、setup、return 與 mount。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
const VueApi = window.Vue;
const app = VueApi.createApp({
setup() {
const title = "安心維護服務";
const description = "讓訪客看懂下一步";
return { title, description };
},
});
app.mount("#app");Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。