建立 Vue 應用

應用例項

每個 Vue 應用都透過使用 createApp 函式建立一個新的 應用例項 開始。

import { createApp } from 'vue'

const app = createApp({
  /* root component options */
})

根元件

傳遞給 createApp 的物件實際上是一個元件。每個應用都需要一個“根元件”，它可以包含其他元件作為其子元件。

如果您正在使用單檔案元件，我們通常從另一個檔案匯入根元件

import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'

const app = createApp(App)

雖然本指南中的許多示例只需要單個元件，但大多數實際應用都是組織成巢狀的、可重用的元件樹。例如，Todo 應用程式的元件樹可能看起來像這樣

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

在指南的後續部分，我們將討論如何定義和組合多個元件。在此之前，我們將關注單個元件內部發生的事情。

掛載應用

應用例項在呼叫其 .mount() 方法之前不會渲染任何內容。它期望一個“容器”引數，這可以是實際的 DOM 元素或選擇器字串。

html

<div id="app"></div>

app.mount('#app')

應用根元件的內容將渲染在容器元素內。容器元素本身不被視為應用的一部分。

.mount() 方法應在完成所有應用配置和資產註冊後呼叫。請注意，與資產註冊方法不同，它的返回值是根元件例項而不是應用例項。

DOM 根元件模板

根元件的模板通常作為元件本身的一部分，但也可能透過直接在掛載容器內編寫來單獨提供模板。

html

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

Vue 會自動使用容器的 innerHTML 作為模板，如果根元件本身沒有配置 template 選項。

在-DOM 模板通常用於不經過構建步驟直接使用 Vue 的應用。它們也可以與伺服器端框架結合使用，其中根模板可能由伺服器動態生成。

應用配置

應用例項公開了一個 .config 物件，允許我們配置一些應用級別的選項，例如定義一個應用級別的錯誤處理器來捕獲所有子元件的錯誤。

app.config.errorHandler = (err) => {
  /* handle error */
}

應用例項還提供了一些註冊應用級資源的方法。例如，註冊一個元件

app.component('TodoDeleteButton', TodoDeleteButton)

這使得 TodoDeleteButton 在我們的應用中的任何地方都可以使用。我們將在指南的後續部分討論元件和其他型別資源的註冊。您還可以在其 API 參考中檢視應用例項的完整 API 列表。

確保在掛載應用之前應用所有應用配置！

多個應用例項

您不僅僅限於在同一頁面上使用單個應用例項。 createApp API 允許多個 Vue 應用在同一頁面上共存，每個應用都有自己的配置和全域性資源作用域。

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

如果您使用 Vue 來增強伺服器端渲染的 HTML，並且只需要 Vue 來控制頁面的特定部分，請避免在整個頁面上掛載單個 Vue 應用例項。相反，建立多個小的應用例項，並將它們掛載到它們負責的元素上。

在 GitHub 上編輯此頁面

建立 Vue 應用 ​

應用例項 ​

根元件 ​

掛載應用 ​

DOM 根元件模板 ​

應用配置 ​