安装
使用我们的在线启动器快速开始使用 Nuxt,或者在终端中本地设置。
在线试用
如果你只想在浏览器中试用 Nuxt 而无需设置项目,你可以使用我们的在线沙盒之一:
或者按照以下步骤在计算机上设置新的 Nuxt 项目。
新项目
前置要求
- Node.js -
20.x或更新版本(但我们推荐使用 active LTS release) - 文本编辑器 - 对 IDE 没有特殊要求,但我们推荐使用带有 官方 Vue 扩展(以前称为 Volar)的 Visual Studio Code 或 WebStorm,以及其他 JetBrains IDE,它们提供开箱即用的出色 Nuxt 支持。如果你使用其他编辑器,例如 Neovim,可以按照 Vue Language Tools setup guides 配置 Vue Language Server 支持。
- 终端 - 用于运行 Nuxt 命令
优化设置的其他注意事项:
- Node.js: 确保使用偶数版本(20, 22 等)
- Neovim: 配置 Vue TypeScript 插件时,确保
location指向@vue/language-server包目录,而不是其二进制文件。请参阅 Neovim setup guide 获取工作配置。 - WSL: 如果你使用 Windows 并且遇到缓慢的 HMR 问题,你可能想尝试使用 WSL (Windows Subsystem for Linux),这可能会解决一些性能问题。
- Windows 缓慢的 DNS 解析: 在 Windows 上使用
localhost:3000而不是127.0.0.1作为本地开发服务器,以在浏览器中实现更快的加载。
打开终端(如果你使用的是 Visual Studio Code,可以打开 integrated terminal),使用以下命令创建一个新的启动器项目:
npm create nuxt@latest <project-name>
yarn create nuxt <project-name>
pnpm create nuxt@latest <project-name>
bun create nuxt@latest <project-name>
deno -A npm:create-nuxt@latest <project-name>
或者,你可以打开 nuxt.new 并按照那里的说明找到其他启动器或主题。
在 Visual Studio Code 中打开项目文件夹:
Terminal
code <project-name>
或者在终端中更改目录到新项目:
cd <project-name>
开发服务器
现在你可以在开发模式下启动 Nuxt 应用:
npm run dev -- -o
yarn dev --open
pnpm dev -o
bun run dev -o
# 要在开发期间使用 Bun 运行时
# bun --bun run dev -o
deno run dev -o
::tip{icon="lucide:circle-check" 干得好! 浏览器窗口应该会自动打开 http://localhost:3000。 ::
下一步
既然你已经创建了 Nuxt 项目,就可以开始构建应用程序了。