DAY 23 - Nuxt 將 component、page 、layout 整合，嘗試寫一個模板

驗收學習成果

再這篇我們會試著整合前面所學的，將 app.vue 引入 layout 區塊，並建立 slot 插槽，試著寫出一個模板及基本的layout 區塊，接著我們會建立基本的 nav 導覽列連結 page 頁面，並再各自頁面引入元件，讓我們嘗試看看吧 。

模板建立順序

(一)  app.vue 建立 layout區塊
(二)  創建 layouts 資料夾 ， 建立 default.vue
(三)  創建 pages 資料夾，建立 index.vue (首頁)
(四)  創建 components 資料夾，建立 header、footer、content
(五)  建立 nav 導覽列 ，使用 <Nuxtlink> 連結頁面

可以嘗試跟著文章一起建立看看，對 Nuxt3 使用上及 auto-imports(自動引入) 還有資料夾結構會更加熟悉

(一) app.vue 建立 layout 區塊

首先我們會在 app.vue 建立 layout 區塊

//原先的 app.vue 
<template>
  <div>
    <NuxtWelcome /> 
  </div>
</template>

<NuxtWelcome />是官方預設的元件，提供給使用 Nuxt 的構建新專案的用戶歡迎。

接著我們要使用<NuxtLayout />元件激活app.vue或error.vue上的 default.vue上的佈局

// app.vue 加入 NuxtLayout
//https://nuxt.com.cn/docs/api/components/nuxt-layout

<template>
  <div>
  //加入layout 區塊
    <NuxtLayout>
      <NuxtWelcome />
    </NuxtLayout>
  </div>
</template>

這時候初步的 app.vue 就建立完成 layout 區塊，接著可以進到下一步

(二) 創建 layouts 資料夾 ， 建立 default.vue

在一開始是沒有 layouts 資料夾 ，前面有提到 Nuxt是漸進式框架，我們可以指令新增或是手動新增資料夾，還記得 DAY 19 - Nuxt 專案目錄結構 分享的新增指令嗎 ? 複習一下

輸入指令新增一個 layout default.vue

npx nuxi add layout default

可以看到資料夾自動創建也幫我們新增了 default.vue

我們來修改一下預設的 default layout 區塊

加入一個 h1 新增文字我是 layout:default.vue

//default.vue
<script lang="ts" setup></script>
<template>
  <div>
    <h1 style="font-size: 48px">我是layout:default.vue</h1>
    <slot />
  </div>
</template>
<style scoped></style>

來用 NuxtDevtools 看一下，成功看到我們的 layout 區塊，中間就是<slot />(畫面顯示)成功!!

在 layout 資料夾裡默認使用 default.vue ，亦可設定多個 layout ，可參考官方文件，而<slot />插槽則是你佈局的內容顯示地方，有點像是 Vue router-view 的用法

(三) 創建 pages 資料夾，建立 index.vue (首頁)

一樣使用指令建立page 資料夾，並建立 index

npx nuxi add page index

建立成功

這時候我們要修改 app.vue 讓 index.vue 頁面顯示出來，我們會使用到 <NuxtPage>，使用方式跟 Slot 插槽一樣，是使用 Vue Router组件<RouterView>的包裝器，用來顯示畫面。

app.vue 加入 NuxtPage

//app.vue
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

index.vue 加入一個 p 標籤

//page/index.vue 
<template>
  <div><p>我是page首頁</p></div>
</template>

來用 NuxtDevtools 看看畫面，會發現我們的 layout 區塊跟 index 都建立好了，是不是沒有很難呢!

(四) 創建 components 資料夾，建立 header、footer、content

接著我們將區塊劃分先建立好 header 、 footer 、content 元件，一樣輸入指令新增

//建立 header
npx nuxi add component layout/HeaderItem 
//建立 footer
npx nuxi add component layout/FooterItem 
//建立 content
npx nuxi add component ContentItem

此時 components 資料夾會長這樣

Vue 元件命名會以大駝峰為主，會有兩個單字，第一個字母都是大寫，以方便辨識(例如:Header + Item > HeaderItem.vue)

接著我們修改一下 layout 的　default.vue 模板，將 Header、Footer 元件引入

//default.vue
<template>
  <div>
    <LayoutHeaderItem />
    <slot />
    <LayoutFooterItem />
  </div>
</template>

接著把剛剛的 ContentItem.vue 引入 index.vue 裡

<template>
  <div>
    <p>我是page首頁</p>
    <ContentItem /> //引入元件
  </div>
</template>

在匯入元件時，因為 Nuxt 特性 auto-imports(自動引入) 所以不需再額外寫 import 元件，直接就可以使用元件(香)。

來分解下畫面，我們先用了 app.vue 進入，然後讀取到了 layout ，再到 page 頁面再到內層的 components 元件

嘗試整合新增看看吧 !!

善用 layout 區塊及元件規劃版面，有效的管理專案讓結構更明確清楚，亦可重複利用元件。

(五) 建立 nav 導覽列 ，使用<Nuxtlink>連結頁面

最後一步 !! 我們要建立 nav ，使用 NuxtLink 連結到各個頁面

NuxtLink 是什麼呢 ?
是 Nuxt 連結其他頁面的元件，是 Vue Router 组件也是 HTML 標籤的替換

我們先回到我們的 HeaderItem.vue 元件，將裡面新增一個 nav 導覽列，並加入我們的 <Nuxtlink>

// HeaderItem.vue，將 nav 加點底色方便辨識
<template>
  <div>
    <nav style="background-color: gainsboro">
      <nuxt-link to="" style="margin-right: 8px">回到首頁</nuxt-link>
      <nuxt-link to="" style="margin-right: 8px">關於</nuxt-link>
      <nuxt-link to="" style="margin-right: 8px">產品介紹</nuxt-link>
      <nuxt-link to="" style="margin-right: 8px">購買商品</nuxt-link>
      <nuxt-link to="" style="margin-right: 8px">客服中心</nuxt-link>
    </nav>
  </div>
</template>

新增各 Page 頁面，一樣用指令新增

npx nuxi add page about //新增 about 頁面
npx nuxi add page introduce //新增 introduce 頁面
npx nuxi add page product //新增 product 頁面
npx nuxi add page customer //新增 customer 頁面

pages目錄

接著回到 HeaderItem.vue 加入位置，在nuxt-link 後方to="/加入頁面名稱"

// HeaderItem.vue
<template>
  <div>
    <nav style="background-color: gainsboro">
      <nuxt-link to="/" style="margin-right: 8px">回到首頁</nuxt-link>
      <nuxt-link to="/about" style="margin-right: 8px">關於</nuxt-link>
      <nuxt-link to="/introduce" style="margin-right: 8px">產品介紹</nuxt-link>
      <nuxt-link to="/product" style="margin-right: 8px">購買商品</nuxt-link>
      <nuxt-link to="/customer" style="margin-right: 8px">客服中心</nuxt-link>
    </nav>
  </div>
</template>

畫面

一個基本的網站模板就完成了，這是一個基礎的整合模板，有header、footer 、也可以透過 nuxt-link 切換不同page，之後開發就可以透過這個模板一步一步開發。

個人會習慣在開發前先切分區域規劃好區塊，建立好模板樣式之後在開發上會更順利，給大家參考看看

• Github Nuxt3-eslint 範例