組件開發：基本觀念
## 一、Vue 組件的基本觀念
Vue 的組件（Component）是一個可重複使用、獨立管理的介面單位。每個組件通常包含三個部分：
```vue
<template>
<!-- HTML 結構 -->
</template>
<script>
// JavaScript 邏輯
</script>
<style>
/* CSS 樣式 */
</style>
```
### 1. `template`
負責描述畫面結構，語法接近 HTML。
```vue
<template>
<h1>網站標題</h1>
</template>
```
### 2. `script`
負責撰寫組件的邏輯，例如資料、方法或生命週期。若目前只是靜態畫面，也可以不撰寫內容。
```vue
<script setup>
// 組件邏輯
</script>
```
### 3. `style`
負責組件的視覺樣式。加上 `scoped` 後，樣式只會套用在目前組件中。
```vue
<style scoped>
h1 {
color: #42b883;
}
</style>
```
### 4. 組件可以互相組合
一個 Vue 組件可以引入並使用另一個組件：
```vue
<script setup>
import WelcomeCard from './components/WelcomeCard.vue'
</script>
<template>
<WelcomeCard />
</template>
```
本範例使用兩個組件：
1. `App.vue`：主要頁面組件
2. `WelcomeCard.vue`：內容卡片組件
兩個組件之間沒有使用 Props、Emit 或其他資料傳遞功能，所有內容都是固定的靜態文字。
---
# 二、基本靜態網頁範例
## 專案結構
```text
src/
├── App.vue
├── main.js
└── components/
└── WelcomeCard.vue
```
---
## 1. `src/App.vue`
```vue
<script setup>
import WelcomeCard from './components/WelcomeCard.vue'
</script>
<template>
<div class="page">
<header class="site-header">
<div class="logo">My Website</div>
<nav class="navigation">
<a href="#">首頁</a>
<a href="#">關於我們</a>
<a href="#">聯絡方式</a>
</nav>
</header>
<main class="main-content">
<section class="hero">
<p class="subtitle">WELCOME TO VUE</p>
<h1>使用 Vue 建立簡單網頁</h1>
<p class="description">
這是一個由 Vue 組件組合而成的靜態網頁範例。
</p>
<WelcomeCard />
</section>
</main>
<footer class="site-footer">
© 2025 My Website
</footer>
</div>
</template>
<style scoped>
* {
box-sizing: border-box;
}
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #f5f7fb;
color: #263238;
}
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 64px;
background-color: #ffffff;
border-bottom: 1px solid #e5e7eb;
}
.logo {
color: #42b883;
font-size: 24px;
font-weight: bold;
}
.navigation {
display: flex;
gap: 24px;
}
.navigation a {
color: #4b5563;
text-decoration: none;
font-size: 15px;
}
.navigation a:hover {
color: #42b883;
}
.main-content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 64px 24px;
}
.hero {
width: 100%;
max-width: 760px;
text-align: center;
}
.subtitle {
margin-bottom: 12px;
color: #42b883;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
}
h1 {
margin: 0 0 16px;
font-size: 42px;
}
.description {
margin-bottom: 32px;
color: #64748b;
font-size: 18px;
}
.site-footer {
padding: 20px;
background-color: #263238;
color: #ffffff;
text-align: center;
font-size: 14px;
}
</style>
```
---
## 2. `src/components/WelcomeCard.vue`
```vue
<template>
<article class="card">
<div class="icon">🌱</div>
<h2>Vue 組件化開發</h2>
<p>
將網頁拆分成多個獨立組件，可以讓程式結構更清楚，也方便未來重複使用。
</p>
<a href="#" class="button">了解更多</a>
</article>
</template>
<style scoped>
.card {
max-width: 520px;
margin: 0 auto;
padding: 32px;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.icon {
margin-bottom: 16px;
font-size: 42px;
}
h2 {
margin: 0 0 12px;
color: #1f2937;
}
p {
margin: 0 0 24px;
color: #64748b;
line-height: 1.8;
}
.button {
display: inline-block;
padding: 10px 20px;
border-radius: 8px;
background-color: #42b883;
color: #ffffff;
text-decoration: none;
}
.button:hover {
background-color: #369d6f;
}
</style>
```
---
## 3. `src/main.js`
```javascript
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
---
## 三、組件關係
```text
App.vue
└── WelcomeCard.vue
```
`App.vue` 透過下面的方式引入 `WelcomeCard.vue`：
```vue
<script setup>
import WelcomeCard from './components/WelcomeCard.vue'
</script>
```
接著在模板中使用：
```vue
<WelcomeCard />
```
本範例沒有使用：
- `props`：父組件傳資料給子組件
- `emit`：子組件通知父組件
- `ref` 或 `reactive`：動態狀態資料
- API 或資料庫
- 事件處理
因此它是一個單純由兩個 Vue 組件組合而成的靜態網頁。
相關學習地圖、教學課程
F2E 網站前端工程