創建一個 Vue 應用(yòng)

應用(yòng)實例 ​

每個 Vue 應用(yòng)都是通過 createApp 函數創建一個新的 應用(yòng)實例：

js

import { createApp } from 'vue'

const app = createApp({

/* 根組件選項 */

})

根組件 ​

我們傳入 createApp 的對(duì)象實際上(shàng)是一個組件，每個應用(yòng)都需要一個“根組件”，其他(tā)組件将作(zuò)爲其子組件。

如果你(nǐ)使用(yòng)的是單文(wén)件組件，我們可以直接從(cóng)另一個文(wén)件中導入根組件。

js

import { createApp } from 'vue'

// 從(cóng)一個單文(wén)件組件中導入根組件

import App from './App.vue'

const app = createApp(App)

雖然本指南中的許多示例隻需要一個組件，但(dàn)大(dà)多數真實的應用(yòng)都是由一棵嵌套的、可重用(yòng)的組件樹組成的。例如，一個待辦事(shì)項 (Todos) 應用(yòng)的組件樹可能(néng)是這(zhè)樣的：

App (root component)

├─ TodoList

│ └─ TodoItem

│ ├─ TodoDeleteButton

│ └─ TodoEditButton

└─ TodoFooter

├─ TodoClearButton

└─ TodoStatistics

我們會(huì)在指南的後續章節中讨論如何定義和(hé)組合多個組件。在那之前，我們得先關注一個組件内到(dào)底發生了(le)什(shén)麽。

挂載應用(yòng) ​

應用(yòng)實例必須在調用(yòng)了(le) .mount() 方法後才會(huì)渲染出來(lái)。該方法接收一個“容器”參數，可以是一個實際的 DOM 元素或是一個 CSS 選擇器字符串：

html

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

js

app.mount('#app')

應用(yòng)根組件的内容将會(huì)被渲染在容器元素裏面。容器元素自(zì)己将不會(huì)被視(shì)爲應用(yòng)的一部分。

.mount() 方法應該始終在整個應用(yòng)配置和(hé)資源注冊完成後被調用(yòng)。同時(shí)請(qǐng)注意，不同于其他(tā)資源注冊方法，它的返回值是根組件實例而非應用(yòng)實例。

DOM 中的根組件模闆 ​

當在未采用(yòng)構建流程的情況下(xià)使用(yòng) Vue 時(shí)，我們可以在挂載容器中直接書寫根組件模闆：

html

<div id="app">

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

</div>

js

import { createApp } from 'vue'

const app = createApp({

data() {

return {

count: 0

}

}

})

app.mount('#app')

當根組件沒有設置 template 選項時(shí)，Vue 将自(zì)動使用(yòng)容器的 innerHTML 作(zuò)爲模闆。

應用(yòng)配置 ​

應用(yòng)實例會(huì)暴露一個 .config 對(duì)象允許我們配置一些(xiē)應用(yòng)級的選項，例如定義一個應用(yòng)級的錯誤處理(lǐ)器，用(yòng)來(lái)捕獲所有子組件上(shàng)的錯誤：

js

app.config.errorHandler = (err) => {

/* 處理(lǐ)錯誤 */

}

應用(yòng)實例還提供了(le)一些(xiē)方法來(lái)注冊應用(yòng)範圍内可用(yòng)的資源，例如注冊一個組件：

js

app.component('TodoDeleteButton', TodoDeleteButton)

這(zhè)使得 TodoDeleteButton 在應用(yòng)的任何地方都是可用(yòng)的。我們會(huì)在指南的後續章節中讨論關于組件和(hé)其他(tā)資源的注冊。你(nǐ)也(yě)可以在 API 參考中浏覽應用(yòng)實例 API 的完整列表。

确保在挂載應用(yòng)實例之前完成所有應用(yòng)配置！

多個應用(yòng)實例 ​

應用(yòng)實例并不隻限于一個。createApp API 允許你(nǐ)在同一個頁面中創建多個共存的 Vue 應用(yòng)，而且每個應用(yòng)都擁有自(zì)己的用(yòng)于配置和(hé)全局資源的作(zuò)用(yòng)域。

js

const app1 = createApp({

/* ... */

})

app1.mount('#container-1')

const app2 = createApp({

/* ... */

})

app2.mount('#container-2')

如果你(nǐ)正在使用(yòng) Vue 來(lái)增強服務端渲染 HTML，并且隻想要 Vue 去控制一個大(dà)型頁面中特殊的一小(xiǎo)部分，應避免将一個單獨的 Vue 應用(yòng)實例挂載到(dào)整個頁面上(shàng)，而是應該創建多個小(xiǎo)的應用(yòng)實例，将它們分别挂載到(dào)所需的元素上(shàng)去。