前言

在 Nuxt 3 開發過程中，在建立頁面、元件甚至是 Server API，我們會需要為建立檔案來完成實作，如果你還不熟悉檔案在專案放置位置，或是需要模板範例，那麼使用 nuxi 指令來新增檔案會比起手動建立來得方便。

使用 nuxi 新增專案模板檔案

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

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

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

nuxi add page

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

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

npx nuxi add page "category/[id]"

nuxi add composable

建立 ./composables/foo.ts 檔案

npx nuxi add composable foo

nuxi add layout

建立 ./layouts/custom.ts 檔案

npx nuxi add layout custom

nuxi add component

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

建立 ./components/TheHeader.vue 檔案

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

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

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

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

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

nuxi add plugin

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

建立 ./plugins/analytics.ts 檔案

npx nuxi add plugin analytics

nuxi add middleware

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

npx nuxi add middleware auth

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

npx nuxi add middleware always-run --global

nuxi add api

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

npx nuxi add api hello

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

npx nuxi add api items --method post

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

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

npx nuxi add api items --method delete

小結

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

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

參考資料

• Nuxt CLI Commands - Add