安装
通过我们的在线启动器快速开始使用 Nuxt,或者在本地使用您的终端启动。
在线体验
如果您只是想在浏览器中体验 Nuxt 而无需设置项目,可以使用我们的在线沙箱之一:
或者按照以下步骤在您的计算机上设置一个新的 Nuxt 项目。
创建新项目
先决条件
- Node.js -
18.x或更高版本(但我们推荐 活跃的 LTS 版本) - 文本编辑器 - 没有 IDE 要求,但我们推荐使用带有 官方 Vue 扩展(之前称为 Volar)的 Visual Studio Code,或者 WebStorm,它以及 其他 JetBrains IDE 都提供了开箱即用的优秀 Nuxt 支持。
- 终端 - 为了运行 Nuxt 命令
优化设置的附加说明:
- Node.js: 确保使用偶数版本(例如 18、20 等)
- Nuxtr: 安装社区开发的 Nuxtr 扩展,一个扩展,提供各种命令和工具,让你的 Nuxt 使用体验更加愉快!
- WSL: 如果您使用的是 Windows 并且遇到 HMR 缓慢的问题,您可以尝试使用 WSL(Windows Linux 子系统),这可能会解决一些性能问题。
打开一个终端(如果您使用的是 Visual Studio Code,您可以打开一个 集成终端),并使用以下命令创建一个新的启动项目:
npm create nuxt <project-name>
yarn create nuxt <project-name>
pnpm create nuxt <project-name>
bun create nuxt <project-name>
deno -A npm:create-nuxt@latest <project-name>
或者,您可以通过打开 nuxt.new 并按照那里的说明找到其他启动器或主题。
npm create nuxt <project-name> 的底层实现是通过 npx create-nuxt-app <project-name> 完成的。具体来说,其调用逻辑如下:
命令转换机制:
npm create 是 npm init 的别名:当使用 npm create nuxt <project-name> 时,npm 会将其转换为 npm init nuxt-app <project-name>,而 npm init 的规则会将 nuxt-app 自动解析为 create-nuxt-app 包。 最终执行 npx create-nuxt-app:npx(Node Package Executor)会从 npm 仓库下载 create-nuxt-app 脚手架工具并执行,生成项目模板。在 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
# To use the Bun runtime during development
# bun --bun run dev -o
deno run dev -o
命令详解:
--是命令行参数分隔符,表示后续参数传递给脚本,而非npm自身-o是构建工具(如Vite、Webpack)的特定参数,通常表示 自动打开浏览器(--open的简写)。
干得漂亮!一个浏览器窗口应该会自动打开,用于 http://localhost:3000.
下一步
既然您已经创建了您的 Nuxt 项目,您就可以开始构建您的应用程序了。