Nuxt4 环境搭建

开始写代码之前，先把开发环境搭好。整个过程分三步，确认 Node 版本、创建项目、启动项目。

检查 Node.js 版本

Nuxt 4 要求 Node.js 20.19、22.12 及以上版本（或 23+），官方推荐使用最新的 LTS 版本。

node -v

如果命令提示不是命令，说明没装 Node。可以去 nodejs.org 下载安装包，一路下一步即可。如果版本低于 20.19，或是处于 22.0 到 22.11 之间，去官网下载新版本覆盖安装。

node -v   # 输出类似 v20.19.x 或 v22.12.x 即可

提示：如果你需要同时维护多个 Node 版本，可以用 nvm-windows 这类版本管理工具切换，新手阶段直接装最新 LTS 就行。

安装开发工具

推荐使用 VS Code，安装两个官方扩展：

Volar 是 Vue 官方的语言工具，没有它的话 .vue 文件几乎没有智能提示，强烈建议安装。

创建项目

打开终端（PowerShell 或 CMD 均可），执行：

npm create nuxt@latest my-nuxt-app

my-nuxt-app 是项目名称，可以换成你喜欢的名字。执行后会出现交互式引导，按提示选择：

提示：Nuxt 4 的创建向导很简洁，全程回车用默认值也没问题，项目跑起来后一切都可以改。

目录初始化选项说明

早期版本的创建向导会问你选择 starter 模板，新版本默认就是最精简的 minimal 模板，不需要纠结。做博客或文档站点可以后面再加 @nuxt/content 模块。

启动项目

创建完成后进入项目目录并启动：

cd my-nuxt-app
npm run dev

看到类似下面的输出就成功了：

Nuxt 4.x.x ready in 500ms
➜ Local:    http://localhost:3000/

在浏览器打开 http://localhost:3000，看到欢迎页面就说明环境搭建完成。

常用 npm 脚本

package.json 中内置了几个常用脚本：

{
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  }
}

新手阶段只需要记住 npm run dev，其余命令在配置与部署篇详细介绍。

常见问题