Nuxt3 的功能已經介紹的差不多了，接下來會參考Vue Mastery的免費教學建置一個部落格做為簡單的練習，Vue Mastery 有許多影音教學資源可以利用，只要對英文不恐懼，會是非常好的資源。

第一天就先結合前面介紹過的套件和 Nuxt3 功能來建置專案

專案檔案會放在 Github Repo - Nuxt3 Demo

使用的套件

以下是目前有安裝的套件，後續如果有增加也會回過來更新，除此之外，因為版本更新的頻次頗高，所以不列出版本資訊，都是以 @latest 最新版為主。

• devDependencies
  • nuxt （day1)
  • vue-gtag-next (day10)
  • vue-i18n: (day9)
    • vue-i18n
    • @intlify/unplugin-vue-i18n
  • eslint: (day15)
    • @typescript-eslint/eslint-plugin
    • @typescript-eslint/parser
    • eslint-plugin-vue
    • eslint-plugin-nuxt
    • eslint-config-prettier
    • eslint-plugin-prettier
  • prettier (day15)
  • husky (day15) (day15)
  • lint-staged (day15)
• dependencies
  • pinia: (day9)
    • pinia
    • @pinia/nuxt

專案目錄結構

這個專案的目錄結構只有 store 是因應 Pinia 而設置，其他都是參考官方文件來設定：

• layouts: 存放框架頁面的檔案 (day4)
• pages: 存放頁面檔案（檔案名稱即路由名稱） (day2, 3)
• components: 存放網頁元件檔案 (day6)
• composables: 存放可重複使用的函式 (day6)
• plugins: 存放插件設定檔和錯誤處理設定檔 (day6)
• middleware: 存放路由管理設定檔 (day5)
• locales: 存放多國語系語言檔 (day9)
• assets: 存放圖片這類的靜態檔案 (day6)
• store: 存放 Pinia 狀態管理的檔案 (day9)