安装
通过我们的在线入门模板快速开始使用 Nuxt,或在本地终端上启动项目。
在线试玩
如果您只是想在浏览器中试玩 Nuxt 而不想搭建项目,可以使用我们的在线沙盒:
或按照下面的步骤在您的计算机上设置一个新的 Nuxt 项目。
新项目
先决条件
- Node.js -
20.x或更高(但我们推荐使用 当前的长期支持 (LTS) 版本) - 文本编辑器 - 没有特定的 IDE 要求,但我们推荐 Visual Studio Code,并配合使用 官方的 Vue 扩展(此前称为 Volar)或 WebStorm,这些编辑器以及 其他 JetBrains IDE 都能开箱即用地提供优秀的 Nuxt 支持。如果您使用其他编辑器,如 Neovim,您可以按照 Vue 语言工具设置指南 配置 Vue Language Server 支持。
- 终端 - 用于运行 Nuxt 命令
为最佳设置提供的附加说明:
- Node.js:确保使用偶数版本(20、22 等)
- Neovim:配置 Vue TypeScript 插件时,确保
location指向@vue/language-server包目录,而非其二进制文件。详情请见 Neovim 设置指南。 - WSL:如果您在 Windows 上遇到热模块替换(HMR)缓慢的问题,建议尝试使用 WSL(Windows 子系统 Linux),这可能改善性能。
- Windows DNS 解析缓慢:在 Windows 上调试时,建议使用
127.0.0.1替代localhost:3000,以获得更快的浏览器加载体验。
打开一个终端(如果您使用 Visual Studio Code,可以打开 集成终端)并使用以下命令来创建一个新的入门项目:
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
做得好!浏览器窗口应该会自动为 http://localhost:3000 打开。
下一步
既然您已经创建了 Nuxt 项目,就可以开始构建您的应用了。