Views 架構簡介
2025年5月28日大约 3 分鐘
學習內容
- 理解 Nuxt.js 中的 Views 架構概念
- 學會使用 app.vue 作為應用程式入口點
- 掌握 Components、Pages、Layouts 的建立與使用
1. Nuxt.js Views 架構簡介
Nuxt.js 的 Views 系統由三個核心部分組成:
- Components:可重複使用的 UI 元件
- Pages:對應特定路由的頁面
- Layouts:包裝頁面的佈局模板
這三者結合形成完整的頁面結構,讓開發更有組織性。
2. app.vue - 應用程式入口點
概念解釋
app.vue
是 Nuxt.js 應用程式的主要入口點。預設情況下,Nuxt 會將此檔案作為入口點,並為應用程式的每個路由渲染其內容。
基本範例
<!-- app.vue -->
<template>
<div>
<h1>歡迎來到我的 Nuxt 應用程式</h1>
<p>這是應用程式的首頁</p>
</div>
</template>
<script setup>
// 這裡可以放置全域的邏輯
console.log('應用程式已啟動')
</script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
</style>
重要概念
- Nuxt 會自動處理 Vue 應用程式的建立過程
- 不需要手動建立
main.js
檔案 app.vue
中的內容會在每個路由中顯示
3. Components - 可重複使用的元件
概念解釋
Components 是可重複使用的 UI 片段,如按鈕、選單等。在 Nuxt 中,放在 components/
目錄下的元件會自動匯入,無需手動 import。
建立第一個元件
<!-- components/AppAlert.vue -->
<template>
<div class="alert">
<span class="alert-icon">⚠️</span>
<slot />
</div>
</template>
<script setup>
// 可以定義元件的邏輯
</script>
<style scoped>
.alert {
background-color: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 4px;
padding: 12px 16px;
margin: 10px 0;
display: flex;
align-items: center;
}
.alert-icon {
margin-right: 8px;
font-size: 18px;
}
</style>
使用元件
<!-- app.vue -->
<template>
<div>
<h1>歡迎來到首頁</h1>
<AppAlert>
這是一個自動匯入的元件。
</AppAlert>
</div>
</template>
元件自動命名規則
AppAlert.vue
→<AppAlert>
UserProfile.vue
→<UserProfile>
components/form/InputField.vue
→<FormInputField>
4. Pages - 路由頁面
概念解釋
Pages 代表特定路由模式的視圖。pages/
目錄中的每個檔案都代表一個不同的路由。
建立頁面系統
首先修改 app.vue
以支援頁面路由:
<!-- app.vue -->
<template>
<div>
<NuxtPage />
</div>
</template>
建立首頁
<!-- pages/index.vue -->
<template>
<div>
<h1>歡迎來到首頁</h1>
<AppAlert>
這是首頁的內容
</AppAlert>
<NuxtLink to="/about">前往關於頁面</NuxtLink>
</div>
</template>
建立關於頁面
<!-- pages/about.vue -->
<template>
<section>
<h1>關於我們</h1>
<p>這個頁面將顯示在 /about 路由上。</p>
<NuxtLink to="/">回到首頁</NuxtLink>
</section>
</template>
路由對應關係
pages/index.vue
→/
pages/about.vue
→/about
pages/contact.vue
→/contact
5. Layouts - 頁面佈局
概念解釋
Layouts 是頁面的包裝器,包含多個頁面共同的 UI 元素,如頁首和頁尾。
建立預設佈局
<!-- layouts/default.vue -->
<template>
<div class="layout">
<AppHeader />
<main class="main-content">
<slot />
</main>
<AppFooter />
</div>
</template>
<style scoped>
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
padding: 20px;
}
</style>
Note
If you only have a single layout in your application, it's recommend using app.vue
with <NuxtPage />
instead.
建立頁首元件
<!-- components/AppHeader.vue -->
<template>
<header class="header">
<nav class="nav">
<NuxtLink to="/" class="logo">我的網站</NuxtLink>
<div class="nav-links">
<NuxtLink to="/">首頁</NuxtLink>
<NuxtLink to="/about">關於</NuxtLink>
</div>
</nav>
</header>
</template>
<style scoped>
.header {
background-color: #2c3e50;
color: white;
padding: 1rem 0;
}
.nav {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: white;
text-decoration: none;
}
.nav-links a {
color: white;
text-decoration: none;
margin-left: 20px;
}
.nav-links a:hover {
text-decoration: underline;
}
</style>
建立頁尾元件
<!-- components/AppFooter.vue -->
<template>
<footer class="footer">
<p>© 2024 我的網站. 版權所有.</p>
</footer>
</template>
<style scoped>
.footer {
background-color: #34495e;
color: white;
text-align: center;
padding: 20px;
margin-top: auto;
}
</style>
使用佈局
更新 app.vue
以使用佈局:
<!-- app.vue -->
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>