前言

這篇文章是我在 2023 iTHome 鐵人賽看到 Ryan 大大寫的 Nuxt 3 實戰筆記系列文章做的一個紀錄，我之前也都有看到發表Nuxt 相關的文章，寫得都很用心仔細很值得跟著練習，我覺得最特別的是 Nuxt 新的 DevTools功能

使用 nuxi 快速建立模板檔案

建立檔案的指令格式如下：

1	npx nuxi add <TEMPLATE> <NAME> [--cwd] [--force]

變數	功能
TEMPLATE	指定要產生的檔案模板類型，目前支援專案內常會使用到的 component、page 與伺服器 api 等。
NAME	填寫檔案名稱，也可以以路徑串接，來建立子資料夾中的檔案
–cwd	指定專案起始目錄，預設為 .。
–force	如果檔案存在，強制覆蓋檔案。

建立路由頁面 - nuxi add page

舉個例子，建立一個 about 路由頁面：

1	npx nuxi add page about

產生出的檔案 ./pages/about.vue 內容如下，預設會有一個模板提供給使用者快速進行後續開發。

<script lang="ts" setup></script>

<template>
  <div>
    Page: foo
  </div>
</template>

<style scoped></style>

產生出的檔案 ./pages/category/[id].vue

1	npx nuxi add page "category/[id]"

建立 composable - nuxi add composable

1	npx nuxi add composable foo

建立 ./composables/foo.ts 檔案

建立 layout - nuxi add layout

1	npx nuxi add layout custom

建立 ./layouts/custom.ts 檔案

建立元件 - nuxi add component

1
2
3

npx nuxi add component TheHeader
# 等價
npx nuxi add component TheHeader --mode "client|server"

建立 ./components/TheHeader.vue 檔案

在建立元件時，可以添加修飾參數 –mode “client|server”、–client、–server，來建立客戶端或伺服器端的元件。

1
2
3

npx nuxi add component TheFooter --client
# 等價
npx nuxi add component TheFooter --mode client

建立 ./components/TheFooter.client.vue 檔案

1
2
3

npx nuxi add component TheFooter --server
# 等價
npx nuxi add component TheFooter --mode server

建立 ./components/TheFooter.server.vue 檔案

建立插件 - nuxi add plugin

1	npx nuxi add plugin analytics

插件的建立，同樣也可以添加修飾參數 –mode “client|server”、–client、–server。

建立 ./plugins/analytics.ts 檔案

建立路由中間件 - nuxi add middleware

1	npx nuxi add middleware auth

建立路由中間件 ./middleware/auth.ts 檔案。

建立時可以添加修飾參數 –global 用以建立通用的全域路由中間件，舉例來說，建立 ./middleware/always-run.global.ts 檔案。

1	npx nuxi add middleware always-run --global

建立伺服器 API - nuxi add api

1	npx nuxi add api hello

建立伺服器 API 處理程式 ./server/api/hello.ts。

建立時可以添加修飾參數 –method post、–method delete 等用以建立不同請求方法的 API，舉例來說，建立 ./server/api/items.post.ts 檔案。

1	npx nuxi add api items --method post

支援請求方法的參數有 connect, delete, get, head, options, patch, post, put 或 trace

小結

nuxi add 指令最重要的是透過指令建立的模板，你不需要在擔心要在哪一個目錄建立，使用的約定是什麼，Nuxt CLI 將會幫你處理好並建立在對應的目錄，在使用 nuxi add 指令建立的模板檔案時，因為 Nuxt 內置了 TypeScript，所以你會發現模板實作多以 TypeScript 的方式來定義，不過也不影響尚未導入 TypeScript 的專案，僅需要把一些 TypeScript 的關鍵字移除及重新命名檔案名稱後，就可以接續檔案內的實作範例來做開發，對於開發上還是能提升不少的速度。