Day 14: Vue載入流程

2025 iThome 鐵人賽

DAY 14

Modern Web

從零打造網頁系統：非資訊人也能完成的全端專題實作系列第 14 篇

17th鐵人賽

bohemianbackpack

團隊ZeroToAI3 × 友AI輔能

2025-09-23 00:37:30

48 瀏覽

分享至

在介紹完Vue基本架構及SFC組件等基本概念後，接下來要介紹Vue是如何載入流程，以能呈現出網頁

首先，於public/index.html中，會提供掛載點，供Vue應用程式掛載

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue App</title>
  </head>
  <body>
    <!-- Vue 程式會掛載這裡 -->
    <div id="app"></div>
  </body>
</html>

接著，藉由Vue應用程式入口，即/scr/main.js，建立並啟動App

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

const app = createApp(App);

app.mount('#app');  // 掛載到 index.html 的 <div id="app">

最後，經由根組件，即/src/App.vue，將子組件組合，並呈現於網頁中。該根組件就是將HTML、CSS及JavaScript整合在一起的SFC組件(single file component)。
- 子組件藉由import自外部引入，子組件存放於/src/components集中管理。
- 並且子組件本身也是一個SFC組件，同樣整合HTMLL、CSS及JavaScript的功能，後續僅藉由引入該子組件，即可個別彈性使用組件，除了方便而更有效率外，組件化後，可獨立於其他組件，以避免相互間可能之函式或樣式的干擾。
```



<template>
  <div class="container">
    
    <Sidebar />
  </div>
</template>


<script>
  import Sidebar from './components/Sidebar.vue';

  export default {
    name: 'App', //命名SFC組件的名稱為App.vue
    components: {
      Sidebar,
    }
  };
</script>


<style scoped>
  .container {
    padding: 20px;
  }
</style>
```

彙整上述之Vue載入流程，以更清楚了解Vue是如何產生畫面，參考如下

index.html      # 提供掛載點，如 <div id="app">
     │
main.js         # Vue應用程式入口，如 createApp(App).mount('#app')
     │
App.vue         # 根元件，主畫面框架，組合其他子組件
     │
Component.vue   # 子組件，如Sidebar...

當順利產生出網頁畫面後，接下來我們只要針對各個SFC組件去做增修，即可逐步建立網頁各個想要規劃的功能，到此應能體會到Vue的結構分明及組件操作，所展現的管理及使用方便性。