[{"data":1,"prerenderedAt":431},["ShallowReactive",2],{"note-\u002Fnotes\u002Fsync\u002Fvue-01-creating-a-vue-application":3},{"id":4,"title":5,"body":6,"category":418,"date":419,"description":420,"draft":421,"extension":422,"meta":423,"navigation":45,"path":424,"seo":425,"sourcePath":426,"stem":427,"tags":428,"__hash__":430},"notes\u002Fnotes\u002Fsync\u002Fvue-01-creating-a-vue-application.md","Creating a Vue Application",{"type":7,"value":8,"toc":407},"minimark",[9,23,65,68,71,99,101,108,116,125,130,133,140,147,162,168,193,198,223,226,234,242,258,264,266,270,283,285,289,299,310,313,327,329,333,338,388,401,403],[10,11,13,14,18,19,22],"h2",{"id":12},"每個-vue-application都是-createapp-函数创建","每個 ",[15,16,17],"code",{},"Vue Application","都是 ",[15,20,21],{},"createApp"," 函数创建",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-javascript shiki shiki-themes github-light github-dark","import { createApp } from 'vue'\n\nconst app = createApp({\n  \u002F* root component options *\u002F\n})\n","javascript","",[15,31,32,40,47,53,59],{"__ignoreMap":29},[33,34,37],"span",{"class":35,"line":36},"line",1,[33,38,39],{},"import { createApp } from 'vue'\n",[33,41,43],{"class":35,"line":42},2,[33,44,46],{"emptyLinePlaceholder":45},true,"\n",[33,48,50],{"class":35,"line":49},3,[33,51,52],{},"const app = createApp({\n",[33,54,56],{"class":35,"line":55},4,[33,57,58],{},"  \u002F* root component options *\u002F\n",[33,60,62],{"class":35,"line":61},5,[33,63,64],{},"})\n",[66,67],"hr",{},[10,69,70],{"id":70},"每個應用都需要根組件",[24,72,74],{"className":26,"code":73,"language":28,"meta":29,"style":29},"import { createApp } from 'vue'\n\u002F\u002F import the root component App from a single-file component.\nimport App from '.\u002FApp.vue'\n\nconst app = createApp(App)\n",[15,75,76,80,85,90,94],{"__ignoreMap":29},[33,77,78],{"class":35,"line":36},[33,79,39],{},[33,81,82],{"class":35,"line":42},[33,83,84],{},"\u002F\u002F import the root component App from a single-file component.\n",[33,86,87],{"class":35,"line":49},[33,88,89],{},"import App from '.\u002FApp.vue'\n",[33,91,92],{"class":35,"line":55},[33,93,46],{"emptyLinePlaceholder":45},[33,95,96],{"class":35,"line":61},[33,97,98],{},"const app = createApp(App)\n",[66,100],{},[10,102,104,105],{"id":103},"掛載-application","掛載 ",[15,106,107],{},"Application",[109,110,111,112,115],"p",{},"Application只有在調用",[15,113,114],{},".mount()","方法后才会渲染任何内容",[24,117,119],{"className":26,"code":118,"language":28,"meta":29,"style":29},"app.mount('#app')\n",[15,120,121],{"__ignoreMap":29},[33,122,123],{"class":35,"line":36},[33,124,118],{},[126,127,129],"h3",{"id":128},"container-不屬於-vue-application-的一部分","Container 不屬於 Vue Application 的一部分",[109,131,132],{},"Vue 的魔法（如綁定變數、監聽點擊），對這個最外層的 HTML 標籤是完全無效的",[134,135,136],"ol",{},[137,138,139],"li",{},"渲染前（你的專案檔案）",[109,141,142,143,146],{},"在 ",[15,144,145],{},"index.html"," (這是 Container 容器)",[24,148,150],{"className":26,"code":149,"language":28,"meta":29,"style":29},"\u003C!-- Vue 管不到這裡！如果你在這裡寫 Vue 的語法，瀏覽器會看不懂 --> \n\u003Cdiv id=\"app\" {{ msg }} @click=\"doSomething\">\u003C\u002Fdiv>\n",[15,151,152,157],{"__ignoreMap":29},[33,153,154],{"class":35,"line":36},[33,155,156],{},"\u003C!-- Vue 管不到這裡！如果你在這裡寫 Vue 的語法，瀏覽器會看不懂 --> \n",[33,158,159],{"class":35,"line":42},[33,160,161],{},"\u003Cdiv id=\"app\" {{ msg }} @click=\"doSomething\">\u003C\u002Fdiv>\n",[109,163,142,164,167],{},[15,165,166],{},"App.vue"," (這是 Root Component 根元件)",[24,169,171],{"className":26,"code":170,"language":28,"meta":29,"style":29},"\u003Ctemplate>\n  \u003C!-- Vue 只管得到這裡面 -->\n  \u003Ch1>我是 App.vue 裡面的標題\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n",[15,172,173,178,183,188],{"__ignoreMap":29},[33,174,175],{"class":35,"line":36},[33,176,177],{},"\u003Ctemplate>\n",[33,179,180],{"class":35,"line":42},[33,181,182],{},"  \u003C!-- Vue 只管得到這裡面 -->\n",[33,184,185],{"class":35,"line":49},[33,186,187],{},"  \u003Ch1>我是 App.vue 裡面的標題\u003C\u002Fh1>\n",[33,189,190],{"class":35,"line":55},[33,191,192],{},"\u003C\u002Ftemplate>\n",[134,194,195],{"start":42},[137,196,197],{},"渲染後（瀏覽器最終看到的樣子）",[24,199,201],{"className":26,"code":200,"language":28,"meta":29,"style":29},"\u003Cdiv id=\"app\"> \n    \u003C!-- 從這裡開始，才是 Vue 真正有掌控權的「應用程式內部」 --> \n    \u003Ch1>我是 App.vue 裡面的標題\u003C\u002Fh1> \n\u003C\u002Fdiv>\n",[15,202,203,208,213,218],{"__ignoreMap":29},[33,204,205],{"class":35,"line":36},[33,206,207],{},"\u003Cdiv id=\"app\"> \n",[33,209,210],{"class":35,"line":42},[33,211,212],{},"    \u003C!-- 從這裡開始，才是 Vue 真正有掌控權的「應用程式內部」 --> \n",[33,214,215],{"class":35,"line":49},[33,216,217],{},"    \u003Ch1>我是 App.vue 裡面的標題\u003C\u002Fh1> \n",[33,219,220],{"class":35,"line":55},[33,221,222],{},"\u003C\u002Fdiv>\n",[109,224,225],{},"========",[227,228,230,233],"h4",{"id":229},"mount是最後的啟動開關",[15,231,232],{},"mount()","是最後的啟動開關",[109,235,236,238,239,241],{},[15,237,114],{}," 方法應該始終在所有應用程式配置和資源註冊完成後呼叫，一旦呼叫了 ",[15,240,114],{},"，Vue 就會開始解析畫面並渲染到瀏覽器上。",[243,244,245,248,251],"ul",{},[137,246,247],{},"路由設定 (Vue Router)",[137,249,250],{},"狀態管理 (Pinia)",[137,252,253,254,257],{},"全域共用的 UI 元件 (如你提到的 ",[15,255,256],{},"TodoDeleteButton",")",[109,259,260,261,263],{},"以上都需要在 ",[15,262,114],{},"之前完成。",[109,265,225],{},[227,267,269],{"id":268},"回傳值的本質不同-實體-vs-元件","回傳值的本質不同 (實體 vs 元件)",[243,271,272,278],{},[137,273,274,277],{},[15,275,276],{},"createApp()"," 回傳的是「應用程式實體 (Application Instance)」",[137,279,280,282],{},[15,281,114],{}," 回傳的是「根元件實體 (Component Instance)」",[66,284],{},[126,286,288],{"id":287},"app-configurations","App Configurations",[290,291,292],"blockquote",{},[109,293,294,295],{},"它設定的是 ",[296,297,298],"strong",{},"Vue 框架本身的底層行為",[109,300,301,302,305,306,309],{},"當你寫下 ",[15,303,304],{},"const app = createApp(App)","的時候，會提供一個",[15,307,308],{},"app.config","調整全域的系統機制。",[109,311,312],{},"最常見的只有這幾個：",[243,314,315,321],{},[137,316,317,318,257],{},"全域錯誤處理 (",[15,319,320],{},"app.config.errorHandler",[137,322,323,324,257],{},"全域變數 (",[15,325,326],{},"app.config.globalProperties",[66,328],{},[126,330,332],{"id":331},"multiple-application-instances","Multiple Application Instances",[290,334,335],{},[109,336,337],{},"createApp API 允許多個 Vue 應用程式共存於相同頁面",[24,339,341],{"className":26,"code":340,"language":28,"meta":29,"style":29},"const app1 = createApp({\n  \u002F* ... *\u002F\n})\napp1.mount('#container-1')\n\nconst app2 = createApp({\n  \u002F* ... *\u002F\n})\napp2.mount('#container-2')\n",[15,342,343,348,353,357,362,366,372,377,382],{"__ignoreMap":29},[33,344,345],{"class":35,"line":36},[33,346,347],{},"const app1 = createApp({\n",[33,349,350],{"class":35,"line":42},[33,351,352],{},"  \u002F* ... *\u002F\n",[33,354,355],{"class":35,"line":49},[33,356,64],{},[33,358,359],{"class":35,"line":55},[33,360,361],{},"app1.mount('#container-1')\n",[33,363,364],{"class":35,"line":61},[33,365,46],{"emptyLinePlaceholder":45},[33,367,369],{"class":35,"line":368},6,[33,370,371],{},"const app2 = createApp({\n",[33,373,375],{"class":35,"line":374},7,[33,376,352],{},[33,378,380],{"class":35,"line":379},8,[33,381,64],{},[33,383,385],{"class":35,"line":384},9,[33,386,387],{},"app2.mount('#container-2')\n",[243,389,390],{},[137,391,392,393,396,397,400],{},"是在解決",[296,394,395],{},"舊有系統翻新","或",[296,398,399],{},"混合架構","的真實開發痛點",[66,402],{},[404,405,406],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":29,"searchDepth":42,"depth":42,"links":408},[409,411,412],{"id":12,"depth":42,"text":410},"每個 Vue Application都是 createApp 函数创建",{"id":70,"depth":42,"text":70},{"id":103,"depth":42,"text":413,"children":414},"掛載 Application",[415,416,417],{"id":128,"depth":49,"text":129},{"id":287,"depth":49,"text":288},{"id":331,"depth":49,"text":332},"frontend","2026-08-05","import { createApp } from 'vue'",false,"md",{},"\u002Fnotes\u002Fsync\u002Fvue-01-creating-a-vue-application",{"title":5,"description":420},"Vue\u002F01-Creating a Vue Application.md","notes\u002Fsync\u002Fvue-01-creating-a-vue-application",[429],"Vue","Fu7IEQszAOj5ddJUS9dN2r--NrqeohOjiq7kZzZ1J0s",1788767747569]