Views 架構簡介

學習內容

• 理解 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>&copy; 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>