2025-03-21-練習「元件設計 + 路由規劃 + Vue 思維」

發表於 閱讀次數：
2025-03-21-練習「元件設計 + 路由規劃 + Vue 思維」

2025-03-21-練習「元件設計 + 路由規劃 + Vue 思維」

這會是一個 整合式 Vue 小專案，你可以用它來練習「元件設計 + 路由規劃 + Vue 思維」，非常適合放在作品集裡 👩‍💻✨

✅ 你的目標

建立一個 Vue 專案，包含：

  • 一個共同的導航列 <NavBar />（出現在每頁）

  • 使用 Vue Router 管理 7 個頁面，每頁對應 1 個課程主題：

    • /lesson1 → 第1課：元件基本觀念
    • /lesson2 → 第2課：props
    • /lesson3 → 第3課：events
    • …
    • /lesson7 → 第7課：複雜元件

🧩 專案結構規劃建議

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
js9-cool-components/
├── src/
│   ├── components/
│   │   └── NavBar.vue
│   ├── lessons/
│   │   ├── Lesson1.vue
│   │   ├── Lesson2.vue
│   │   ├── Lesson3.vue
│   │   └── ...Lesson7.vue
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js   👈 建立 Vue Router 設定
├── vite.config.js
├── package.json
└── ...

✅ 第一步：建立專案並安裝 Vue Router

請打開 macOS 終端機，在你的資料夾下執行：

1
2
3
4
npm create vite@latest js9-cool-components -- --template vue
cd js9-cool-components
npm install
npm install vue-router@4

✅ 第二步：設定 router（src/router/index.js）

建立檔案：src/router/index.js，內容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { createRouter, createWebHistory } from 'vue-router'
import Lesson1 from '../lessons/Lesson1.vue'
import Lesson2 from '../lessons/Lesson2.vue'
import Lesson3 from '../lessons/Lesson3.vue'
import Lesson4 from '../lessons/Lesson4.vue'
import Lesson5 from '../lessons/Lesson5.vue'
import Lesson6 from '../lessons/Lesson6.vue'
import Lesson7 from '../lessons/Lesson7.vue'

const routes = [
  { path: '/lesson1', component: Lesson1 },
  { path: '/lesson2', component: Lesson2 },
  { path: '/lesson3', component: Lesson3 },
  { path: '/lesson4', component: Lesson4 },
  { path: '/lesson5', component: Lesson5 },
  { path: '/lesson6', component: Lesson6 },
  { path: '/lesson7', component: Lesson7 },
]

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

export default router

✅ 第三步：設定 main.js

打開 src/main.js，加上 router：

1
2
3
4
5
6
7
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

✅ 第四步：建立 NavBar 元件

src/components/NavBar.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <nav>
    <ul>
      <li><router-link to="/lesson1">第1課</router-link></li>
      <li><router-link to="/lesson2">第2課</router-link></li>
      <li><router-link to="/lesson3">第3課</router-link></li>
      <li><router-link to="/lesson4">第4課</router-link></li>
      <li><router-link to="/lesson5">第5課</router-link></li>
      <li><router-link to="/lesson6">第6課</router-link></li>
      <li><router-link to="/lesson7">第7課</router-link></li>
    </ul>
  </nav>
</template>

<style scoped>
nav {
  background: #f5f5f5;
  padding: 1rem;
}
ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}
a.router-link-exact-active {
  font-weight: bold;
  color: blue;
}
</style>

✅ 第五步：修改 App.vue

src/App.vue

1
2
3
4
5
6
7
8
9
10
<template>
  <div>
    <NavBar />
    <router-view />
  </div>
</template>

<script setup>
import NavBar from './components/NavBar.vue'
</script>

✅ 第六步：建立 7 個 lesson vue 元件

你可以在 src/lessons/ 目錄下建立這些檔案：

  • Lesson1.vue
1
2
3
<template>
  <h2>🎓 Lesson 1: 元件基本觀念</h2>
</template>
  • Lesson2.vue ~ Lesson7.vue 依此類推，只要把文字換掉即可。

✅ 第七步：執行看看！

1
npm run dev

打開瀏覽器，看是不是可以點選上方選單，切換到不同課程頁面 🎉