2025-03-16-JavaScript（九）—— 不想教你 Vue，只想讓你做酷炫元件 這一課我們來試著匯入元件就好

發表於 閱讀次數：
2025-03-16-JavaScript（九）—— 不想教你 Vue，只想讓你做酷炫元件 這一課我們來試著匯入元件就好

2025-03-16-JavaScript（九）—— 不想教你 Vue，只想讓你做酷炫元件 這一課我們來試著匯入元件就好

JavaScript 系列九：第1課 ── 學習 Vue 元件基本觀念

課程目標
能夠運行 Vue 元件
課程內容
我們一樣讀官網文件就好

先來讀元件基本觀念

https://vuejs.org/guide/essentials/component-basics.html

再來讀註冊元件的方法

https://vuejs.org/guide/components/registration.html

再來讀元件的檔案格式

https://vuejs.org/guide/scaling-up/sfc.html

我鼓勵你習慣去讀英文，但實在不行就讀中文沒關係

https://cn.vuejs.org/guide/essentials/component-basics.html

在我的課程中反覆說過很多次

官網文件中各種內容很多，大部份看不懂沒關係，稍微有個印象就好

很多內容學了，其實根本實際上也很少用到

留個印象，遇到問題大概知道去哪翻閱就可以

整個程式設計師生涯，就用這種態度即可，沒問題的

很多時候，甚至一知半解，也沒關係，根本不重要

舉個例，官網有時候會這樣寫

有時候會這樣寫


官網有說明，分別在什麼時候，建議哪種寫法比較好

老實說，那些說明，連我都看不太懂，我也不認同官網的建議

我建議你就隨便寫，能跑就可以了

上過我前面課程的話就知道，我對 Vue 的許多設計細節，充滿意見、不認同

但是這個行業就是這樣，大家都充滿主觀看法，工具本身也充滿主觀看法

這些很正常，並不妨礙你成為一個專業的程式設計師

反正，框架的背後，就是會轉換成你在系列一～六學過的那些：DOM 操作、事件處理、狀態管理，就這樣而已

課後作業
請使用官方的元件試玩工具：Vue SFC Playground

https://sfc.vuejs.org/

這一課我們來試著匯入元件就好

請建立 Header.vue Main.vue Footer.vue 三個元件
元件內容分別顯示 I am header! I am main! I am footer! 就好
在 App.vue 之中匯入以上元件
做出以上功能，你就完成這次的課程目標了！

歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！

可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！

發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！

貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！

未來面試時，分享給面試官看，會讓人知道你的積極程度！

這堂課的目標是讓你體驗「匯入 Vue 元件」的基本流程。以下是一步步教學，讓你完成這次任務 ✅

✅ 一、建立元件

在 src/components/ 資料夾中，建立三個元件檔案：

Header.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <header>
    I am header!
  </header>
</template>

<script setup>
// 這裡不用寫任何 JS
</script>

<style scoped>
header {
  background-color: lightblue;
  padding: 10px;
  text-align: center;
}
</style>

Main.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <main>
    I am main!
  </main>
</template>

<script setup>
</script>

<style scoped>
main {
  background-color: lightgreen;
  padding: 10px;
  text-align: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <footer>
    I am footer!
  </footer>
</template>

<script setup>
</script>

<style scoped>
footer {
  background-color: lightcoral;
  padding: 10px;
  text-align: center;
}
</style>

✅ 二、匯入並使用這三個元件到 App.vue

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    <Header />
    <Main />
    <Footer />
  </div>
</template>

<script setup>
import Header from './components/Header.vue'
import Main from './components/Main.vue'
import Footer from './components/Footer.vue'
</script>

✅ 三、你完成了！

如果你已經用 npm run dev 或 vite 開著伺服器，應該可以看到以下畫面：

1
2
3
I am header!
I am main!
I am footer!

而且每一段都有背景色，讓它們視覺上分開。

如果你已完成 ✅，也可以再想想這些進階挑戰：

  • 💡 把三個元件包成一個頁面版型（Layout）
  • 💡 加上 props 傳資料給元件
  • 💡 加入一點動態互動（像是按鈕點一下主內容變色）

需要我幫你延伸進階任務嗎？

在 Vue SFC Playground（Vue 單檔元件線上編輯器）裡，你可以用多個 SFC 檔案來模擬實際的 Vue 開發專案。

✅ 一、建立多個元件檔案（像在專案中一樣）

在 Vue SFC Playground 的左側 Files 面板中：

  1. 點擊 ➕（Add File）

  2. 建立三個檔案：

    • Header.vue
    • Main.vue
    • Footer.vue

✅ 二、每個檔案填入內容

Header.vue

1
2
3
4
5
6
<template>
  <header>I am header!</header>
</template>

<script setup>
</script>

Main.vue

1
2
3
4
5
6
<template>
  <main>I am main!</main>
</template>

<script setup>
</script>
1
2
3
4
5
6
<template>
  <footer>I am footer!</footer>
</template>

<script setup>
</script>

✅ 三、修改 App.vue 匯入這三個元件

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    <Header />
    <Main />
    <Footer />
  </div>
</template>

<script setup>
import Header from './Header.vue'
import Main from './Main.vue'
import Footer from './Footer.vue'
</script>

✅ 四、看到成果

右邊的預覽畫面就會顯示：

1
2
3
I am header!
I am main!
I am footer!

你可以加上 <style> 各別美化，也可以在 App.vue 統一加上排版樣式。

補充：如果你不看到「檔案管理器」

請點左上角「📄 Files」圖示，就可以打開檔案列表啦！