Vue 3 應用的主入口詳解：如何初始化應用

更新日期： 2025 年 1 月 1 日

在 Vue 3 中，應用初始化是構建 Vue 項目的第一步，這一過程包括創建應用實例、註冊功能模組、並將應用掛載到 DOM 上。

本篇文章以典型的 Vue 3 主入口文件為例，逐步解析每一行代碼，幫助新手掌握 Vue 3 的初始化邏輯。

主入口代碼範例

以下是典型的 Vue 3 主入口文件，位於項目的 frontend/scripts/app.js 中：

// 引入 Vue 和其他模組
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 引入路由模組

// 創建 Vue 應用
const app = createApp(App);

// 使用路由
app.use(router);

// 掛載到 DOM
app.mount("#app");

這段代碼完成了 Vue 應用的初始化過程，將應用掛載到 DOM 中的 #app 容器上。接下來，讓我們逐行解析這段代碼。

代碼逐行解析

引入 Vue 的 createApp 函數

import { createApp } from "vue";

• 作用：
  從 Vue 的核心庫中引入 createApp 函數，用於創建應用實例。
• 背景：
  在 Vue 3 中，createApp 替代了 Vue 2 中的 new Vue()，提供更靈活的插件管理和應用設置能力。

關鍵特性：

• 可以創建多個應用實例，每個應用都有自己的組件、插件和上下文。
• 提供豐富的方法，用於管理全局配置（如插件、組件、指令等）。

範例：

const app = createApp({}); // 創建一個應用實例

引入根組件 App.vue

import App from "./App.vue";

• 作用：
  根組件 App.vue 是應用的主要結構和邏輯入口，通常包含全局布局和核心邏輯。
• 背景：
  Vue 的單文件組件（SFC）格式將 HTML、CSS 和 JavaScript 集成在一個文件中，實現邏輯與結構分離。

典型結構：App.vue

<template>
  <div id="app">
    <router-view></router-view> <!-- 顯示對應路由的內容 -->
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
}
</style>

引入路由模組

import router from "./router";

• 作用：
  引入配置好的路由模組，用於管理多頁面導航。
• 背景：
  路由模組通常由 vue-router 提供，負責處理應用的頁面切換邏輯和導航守衛。

路由配置範例：router.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "./components/Home.vue";
import About from "./components/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

創建應用實例

const app = createApp(App);

• 作用：
  創建一個 Vue 應用實例，並將根組件 App.vue 綁定到該實例。
• 詳細解析：
  • createApp(App)：綁定應用的根組件，這是整個應用的入口點。
  • 返回的 app 實例提供多種方法，用於註冊插件、組件等。

應用實例的功能：

1. 註冊全局插件（如路由、狀態管理）。
2. 管理全局組件或指令。
3. 提供全局屬性或方法。

註冊路由模組

app.use(router);

• 作用：
  將路由模組註冊到應用實例，使整個應用可以使用路由功能。
• 背景：
  Vue 3 的插件機制允許通過 use() 方法將功能擴展到應用實例，這一步驟完成了路由與應用的集成。

掛載應用到 DOM

app.mount("#app");

• 作用：
  將 Vue 應用掛載到網頁中的 DOM 節點，啟動應用並接管該節點的渲染邏輯。
• 詳細解析：
  • "#app" 是 HTML 中的容器元素，通常定義在模板文件中： <div id="app"></div>
  • app.mount() 後，Vue 開始控制這個節點及其子節點，並渲染組件樹。

整體流程總結

1. 引入必要模組：
   • 包括 Vue 核心庫、根組件、路由模組。
2. 創建應用實例：
   • 使用 createApp 方法創建 Vue 應用。
3. 註冊插件：
   • 通過 .use() 方法註冊功能模組，如路由模組。
4. 掛載應用：
   • 使用 .mount() 方法將應用掛載到 DOM 節點，啟動應用。

相關背景補充

Vue 3 與 Vue 2 的主要區別

• Vue 3 引入了 createApp 方法，支持多應用實例。
• Vue 3 使用 Composition API，提升了組件邏輯的靈活性和可重用性。

單文件組件（SFC）

• 單文件組件（Single File Component）將模板、樣式和邏輯集中到一個文件中，便於管理和開發。

結語

通過這篇文章，我們詳細解析了 Vue 3 主入口文件的每一行代碼，並介紹了應用初始化的核心邏輯。

希望這篇指南能幫助新手快速理解 Vue 3 的應用結構，並輕鬆啟動自己的項目！🎉