摘要

每個 Vue 應用都始於一個「應用程式實例」，我們使用 createApp 函數來建立這個實例，並用 .mount() 方法將其掛載到頁面上。

定義與說明

createApp(RootComponent)

接收一個「根元件」（通常是 App.vue）作為參數，並回傳一個應用程式實例。這個實例是整個應用的「大腦」或總控制中心。

.mount('#app')

應用實例的一個方法，用來將應用渲染到 HTML 頁面中一個指定的 DOM 元素上（該元素的 id 為 app）。

實作範例

JavaScript

// 在 src/main.js 中
import { createApp } from 'vue'
import App from './App.vue'

// 1. 建立應用程式實例
const app = createApp(App)

// 2. 將實例掛載到頁面 ID 為 'app' 的元素上
app.mount('#app')

結論

如果說 createApp 是「製造大腦」，那麼 .mount() 就是「進行靈魂附體」。這兩步是將 Vue 應用從無形的程式碼變為使用者可見畫面的關鍵。

createApp mount Vue 實例