Vue 使用pnpm建立Nuxt 3專案

Nuxt是一個基於Vue的框架，透過約定好的專案結構與規範，讓開發者能輕鬆開發支援SPA(Single Page Application，單頁應用程式)、SSR(Server-Side Rendering，伺服器渲染)與SSG(Static Site Generation，靜態網站生成)的應用，並自動處理路由設定。

使用pnpm建立Nuxt 3專案的方式如下。

環境

• Windows 11
• Node.js v22.21.1

事前要求

安裝好Node.js，參考「Windows 11 安裝nvm」。本篇的Node版本為v22.21.1。

安裝好pnpm。

建立Nuxt專案

開啟命令列，輸入pnpm create nuxt@latest <project-name> -- --no-install -t v3，<project-name>為專案名稱。

專案目錄建立後，將命令列切換到該目錄下，執行pnpm install --verbose安裝依賴套件。

若安裝過程超過10分鐘卡住一直在下載依賴Installing dependencies...，則按Ctrl + C取消，然後輸入pnpm install --verbose。

C:\nuxt3-demo>pnpm install --verbose
Lockfile is up to date, resolution step is skipped
Already up to date

> nuxt3-demo@ postinstall C:\nuxt3-demo
> nuxt prepare


ℹ Nuxt collects completely anonymous data about usage.                                                     4:11:35 PM
  This will help us improve Nuxt developer experience over time.
  Read more on https://github.com/nuxt/telemetry


✔ Are you interested in participating?
No

│                                                                                                           4:11:40 PM
◆  Types generated in .nuxt.
╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│   Ignored build scripts: @parcel/watcher@2.5.1, esbuild@0.25.12, esbuild@0.27.2.           │
│   Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.   │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
Done in 7.7s using pnpm v10.27.0

若看到"Already up to date"且出現"Ignored build scripts"，則在命令列執行pnpm approve-builds，選擇esbuild和@parcel/watcher，然後確定。

C:\nuxt3-demo>pnpm approve-builds
√ Choose which packages to build (Press <space> to select, <a> to toggle all, <i> to invert selection) · @parcel/watcher, esbuild

√ The next packages will now be built: @parcel/watcher, esbuild.
Do you approve? (y/N) · true
node_modules/.pnpm/esbuild@0.25.12/node_modules/esbuild: Running postinstall script, done in 409ms
node_modules/.pnpm/esbuild@0.27.2/node_modules/esbuild: Running postinstall script, done in 330ms
node_modules/.pnpm/@parcel+watcher@2.5.1/node_modules/@parcel/watcher: Running install script, done in 108ms
PS C:\nuxt3-demo> pnpm install
Lockfile is up to date, resolution step is skipped
Already up to date
. postinstall$ nuxt prepare
│ │
│ ◆  Types generated in .nuxt.
└─ Done in 1.5s
Done in 2s using pnpm v10.27.0

專案目錄如下：

/
├─ .nuxt
├─ node_modules
├─ public
├─ server
│  └─ tsconfig.json
├─ .gitignore
├─ app.vue
├─ nuxt
├─ package.json
├─ pnpm-lock.yaml
├─ pnpm-workspace.yaml
├─ README.md
└─ tsconfig.json

安裝好後在專案目錄執行pnpm dev啟動開發伺服器。

C:\nuxt3-demo>pnpm dev

> nuxt3-demo@ dev C:\nuxt3-demo
> nuxt dev

│                                                                                                           4:41:14 PM
●  Nuxt 3.20.2 (with Nitro 2.12.9, Vite 7.3.0 and Vue 3.5.26)
                                                                                                            4:41:14 PM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v3.1.1)                                                 4:41:14 PM

✔ Vite client built in 28ms                                                                                4:41:15 PM
✔ Vite server built in 295ms                                                                               4:41:15 PM
✔ Nuxt Nitro server built in 700ms                                                                   nitro 4:41:16 PM
ℹ Vite server warmed up in 1ms                                                                             4:41:16 PM
ℹ Vite client warmed up in 2ms 

開啟瀏覽器，在網址列輸入http://localhost:3000檢視網頁。

app.vue的內容預設如下：

app.vue

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>