Vue 建立簡單的Nuxt 3網頁

本篇是透過建立一個簡單的Nuxt 3網頁來學習Vue的基礎知識。

事前要求

參考「Vue 使用pnpm建立Nuxt 3專案」建立Nuxt 3專案。

建立目錄

在專案根目錄下建立以下目錄：

• components - 用來存放可重複使用的元件
• layouts - 用來存放頁面的版型（排版）
• pages - 用來存放路由頁面，Nuxt會根據此目錄下的檔案建立同名的路由，這個特色稱為「檔案系統路由(file-system routing)」。

建立pages/index.vue

在pages目錄下建立index.vue，為首頁，內容如下。

index.vue

<template>
  <h1>Hello Nuxt 3</h1>
</template>

Nuxt會將pages/index.vue做為/的路由頁面。

建立pages/about.vue

在pages目錄下建立about.vue，為關於我們頁面，內容如下。

about.vue

<template>
  <h1>About page</h1>
</template>

Nuxt會將pages/about.vue做為/about的路由頁面。

建立components/Header.vue

在components目錄下建立Header.vue，作用為上方導覽列的內容元件，內容如下。

Header.vue

<template>
  <header style="border-bottom:1px solid #ccc; padding: 8px;">
    <nav>
      <ul style="display:flex; gap:8px; list-style:none; margin:0; padding:0;">
        <li><NuxtLink to="/">Home</NuxtLink></li>
        <li><NuxtLink to="/about">About</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

<NuxtLink>用來設定連結位址，相當於Vue的<RouterLink>。

建立layouts/default.vue

在layouts目錄下建立default.vue，作用為Nuxt預設使用的頁面layout（排版），內容如下。

default.vue

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

<template>
  <div>
    <Header />

    <main>
      <slot />
    </main>
  </div>
</template>

<Header />為導覽列內容。

<slot />為此layout頁面在<NuxtLayout>所包夾的內容，也就是下面在app.vue中的<NuxtPage>。

修改app.vue

把專案根目錄的app.vue內容修改為：

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>    

<NuxtPage>會顯示route對應的頁面，若為/則顯示pages/index.vue頁面；/about則顯示pages/about.vue頁面。每個頁面本身決定所屬的layout是哪個（預設是layouts/default.vue），並由<NuxtLayout>渲染。而<NuxtLayout>的作用為安排<NuxtPage>頁面在layout中的位置。

github

效果如下。

然後可以加入左側的功能選單。