EP2 - 創建 Vue App
繼續看Document，練習到直到可以活用～
雖然我是實用派的～但還是要研究框架文件 @@
App實例 - application instance
每個 Vue 應用程式都會從使用 createApp 函數創建一個新的應用程式實例開始：
import { createApp } from 'vue'
const app = createApp({
/* 根組件選項 */
})
根組件 - Root Component
傳遞給 createApp 的對象實際上是一個組件。每個應用程式都需要一個「根組件」，這個根組件可以包含其他組件作為它的子組件。
如果你使用的是單檔組件 (Single-File Components)，我們通常會從另一個文件中導入根組件：
import { createApp } from 'vue'
// 從單檔組件中導入根組件 App
import App from './App.vue'
const app = createApp(App)
雖然文件中的許多範例只需要一個組件，但大多數實際應用程式會被組織成一個由嵌套、可重用的組件構成樹狀結構。例如，一個 Todo 應用程式的組件樹可能如下所示：
App (根組件)
├─ TodoList
│ └─ TodoItem
│ ├─ TodoDeleteButton
│ └─ TodoEditButton
└─ TodoFooter
├─ TodoClearButton
└─ TodoStatistics
文件後續將討論如何定義和組合多個組件。在此之前，將專注於單個組件內部運作。
掛載App - Mounting the App
應用程式實例在調用其 .mount() 方法之前，不會渲染任何內容。.mount() 方法需要一個「容器」參數，這個參數可以是一個實際的 DOM 元素或是一個選擇器字符串：
<div id="app"></div>
app.mount('#app')
應用程式的根組件的內容將會渲染在這個容器元素內部，但容器元素本身並不被視為應用程式的一部分。
應該在完成所有應用程式配置和資源註冊後再調用 .mount() 方法。此外，請注意其返回值與資源註冊方法不同，是根組件實例而不是應用程式實例。
在 DOM 中的根組件模板
通常，根組件的模板是組件自身的一部分，但也可以單獨提供模板，直接將其寫在掛載容器內：
<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 作為模板。
在 DOM 中的模板通常用於無需構建步驟的 Vue 應用程式中。它們也可以與伺服器端框架結合使用，其中根模板可能由伺服器動態生成。
App配置 - App Configurations
應用程式實例（Application Instance）提供了一個 .config 物件，讓我們可以配置一些應用層級的選項。例如，定義一個應用層級的錯誤處理程序，捕獲所有後代組件中的錯誤：
app.config.errorHandler = (err) => {
/* handle error */
}
應用程式實例還提供了一些方法來註冊應用範圍資產（assets）。例如，註冊一個組件：
app.component('TodoDeleteButton', TodoDeleteButton)
這樣就使得 TodoDeleteButton 組件可以在應用的任何地方使用。文件後續章節中討論組件和其他類型資產的註冊。你也可以在 API 參考中瀏覽完整的應用程式實例 API 列表。確保在掛載應用程式之前應用所有的配置！
多個App實例 - Multiple application instances
在同一個頁面上，你不僅限於使用單個應用程式實例。createApp API 允許多個 Vue 應用程式共存於同一頁面上，每個應用程式都有自己的配置範圍和全局資產：
const app1 = createApp({
/* ... */
})
app1.mount('#container-1')
const app2 = createApp({
/* ... */
})
app2.mount('#container-2')
如果你使用 Vue 來增強伺服器渲染的 HTML，只需要 Vue 來控制大頁面中的特定部分，應避免在整個頁面上掛載單個 Vue 應用程式實例。相反，應創建多個小型應用程式實例，並將它們掛載到各自負責的元素上。
看完這章節好像有點懂又不太懂～＠＠～
你可能也想看
