恩，開始走400公尺了...

It's up to you how far you'll go.
能走多遠取決於你自己。

在前天的學習中，已經熟悉了 Sidebar component 的使用，
今天我們將進一步實作整個 Layout 佈局。
首先，我們需要規劃畫面的框架結構，然後再進行各個 component 的開發。
由於專案是基於 Nuxt 開發的，頁面數也會隨之累加。

新增首頁
Nuxt 專案略有不同，如需新增頁面 下指令，
自動載入頁面的 router

npx nuxi add page index

快速建立一個新的頁面，不需要手動設置路由。

基本的Layout佈局
畫面通常可以分為三大區塊：Header、Main 和 Footer。
來看看如何使用 PrimeVue 的套件來實現這些區塊的 UI 佈局。

• Header

  • 使用套件：Toolbar
  • 功能：應用程式的標題、導航按鈕等元素。
  • 使用者切換功能：如需切換使用者，可以使用 Dropdown 套件來實現下拉選單功能。

• Main

  • 使用套件：Sidebar 和 PanelMenu
  • 功能：
    • Sidebar 負責主要的側邊導航功能，
    • PanelMenu 顯示可展開的選單結構

• Footer

  • 功能：放置版權資訊或其他輔助性連結。

今天的 Layout 佈局設計就此完成，這是應用構建過程中的重要一步。無論是頁面框架還是元件佈局，我們都已經建立了一個穩固的基礎。這就像登山過程中的一個平臺，讓我們可以短暫休息，準備下一段攀登。

明天見！讓我們繼續向山頂邁進！