---
title: "安装"
description: "通过我们的在线入门模板快速开始使用 Nuxt，或在本地终端上启动项目。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/getting-started/installation"
---
# 安装

> 通过我们的在线入门模板快速开始使用 Nuxt，或在本地终端上启动项目。

## 在线试玩

如果您只是想在浏览器中体验 Nuxt，而不想先搭建项目，可以使用这个在线沙盒：

::card-group
  :::card
  ```yaml [props]
  title: 在 StackBlitz 中打开
  color: info
  icon: i-simple-icons-stackblitz
  to: https://stackblitz.com/github/nuxt/starter?file=app%2Fapp.vue
  target: _blank
  ```
  可在线使用的游乐场，带有代码编辑器和终端访问。
  :::
::

## 新建项目

::steps
### 前置要求

- **Node.js** - [`22.x`](https://nodejs.org/en) 或更高版本（但我们推荐使用 [活动 LTS 版本](https://github.com/nodejs/release#release-schedule)）
- **文本编辑器** - 没有 IDE 要求，但我们推荐使用 [Visual Studio Code](https://code.visualstudio.com/) 并安装 [官方 Vue 扩展](https://marketplace.visualstudio.com/items?itemName=Vue.volar)（以前称为 Volar）或 [WebStorm](https://www.jetbrains.com/webstorm/)，它们连同 [其他 JetBrains IDE](https://www.jetbrains.com/ides/) 一起，开箱即用地提供了出色的 Nuxt 支持。如果您使用其他编辑器，例如 Neovim，可以通过遵循 [Vue Language Tools 安装指南](https://github.com/vuejs/language-tools/wiki) 来配置 [Vue Language Server](https://github.com/vuejs/language-tools) 支持。
- **终端** - 为了运行 Nuxt 命令

  :::callout
    ::::collapsible{name="其他有助于获得最佳配置的说明"}
    - **Node.js**：请确保使用偶数版本（22、24 等）
    - **Neovim**：在配置 Vue TypeScript 插件时，请确保 `location` 指向 `@vue/language-server` 包目录，而不是其二进制文件。有关可用配置，请参阅 [Neovim 安装指南](https://github.com/vuejs/language-tools/wiki/Neovim)。
    - **WSL**：如果您使用的是 Windows，并且遇到 HMR 速度较慢的问题，可以尝试使用 [WSL（适用于 Linux 的 Windows 子系统）](https://learn.microsoft.com/en-us/windows/wsl/install)，它可能会解决一些性能问题。
    - **Windows DNS 解析缓慢**：在 Windows 上进行本地开发时，不要使用 `localhost:3000` 作为本地开发服务器地址，而应使用 `127.0.0.1`，这样在浏览器中会获得更快的加载体验。
    ::::
  :::

### 创建新项目

打开终端（如果您使用的是 [Visual Studio Code](https://code.visualstudio.com)，可以打开 [集成终端](https://code.visualstudio.com/docs/terminal/basics)）并使用以下命令创建新的入门项目：

  :::code-group{sync="pm"}
  ```bash [npm]
  npm create nuxt@latest <project-name>
  ```

  ```bash [yarn]
  yarn create nuxt <project-name>
  ```

  ```bash [pnpm]
  pnpm create nuxt@latest <project-name>
  ```

  ```bash [bun]
  bun create nuxt@latest <project-name>
  ```

  ```bash [deno]
  deno -A npm:create-nuxt@latest <project-name>
  ```
  :::

在 Visual Studio Code 中打开您的项目文件夹：

```bash [Terminal]
code <project-name>
```

或者在终端中切换到新项目目录：

```bash
cd <project-name>
```

### 开发服务器

现在您可以在开发模式下启动 Nuxt 应用：

  :::code-group{sync="pm"}
  ```bash [npm]
  npm run dev -- -o
  ```

  ```bash [yarn]
  yarn dev --open
  ```

  ```bash [pnpm]
  pnpm dev -o
  ```

  ```bash [bun]
  bun run dev -o

  # 开发期间使用 Bun 运行时
  # bun --bun run dev -o
  ```

  ```bash [deno]
  deno run dev -o
  ```
  :::

  :::tip{icon="i-lucide-circle-check"}
  做得好！浏览器窗口应该会自动为 <http://localhost:3000> 打开。
  :::

  :::tip{icon="i-lucide-container"}
  如果您使用 Docker，或者希望在不同机器上拥有一致的开发环境，可以考虑使用开发容器。[了解有关开发容器的更多信息。](https://nuxt.zhcndoc.com/docs/4.x/guide/best-practices/devcontainers)
  :::
::

## 下一步

既然您已经创建了 Nuxt 项目，就可以开始构建您的应用了。

::read-more{title="Nuxt 概念" to="https://nuxt.zhcndoc.com/docs/4.x/guide/concepts"}
::


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.