PhpStorm 2025.3 Help

Nuxt

借助 PhpStorm,您可以使用 Nuxt 框架开发您的 Vue.js 应用。 在 PhpStorm 中设置 Nuxt 应用的推荐方式是 使用新建项目向导并选择专用 Nuxt 模板

开始之前

  1. 下载并安装 Node.js ,版本 20 或更高版本。

  2. 请确保已在您的项目中配置本地 Node.js 运行时:打开 设置 对话框(Ctrl+Alt+S ),然后转到 语言和框架 | JavaScript 运行时Node.js 运行时 字段显示项目默认的 Node.js 运行时。 了解更多,见 配置本地 Node.js 解释器

  3. 确保 JavaScript and TypeScriptJavaScript DebuggerVue.js 必需插件在 设置 | 插件 页面和 已安装 选项卡上启用。 如需更多信息,请参阅 插件管理

使用 Nuxt 专用模板创建项目

  1. 点击 创建新项目 屏幕上的 欢迎 或从主菜单中选择 文件 | 新建 | 项目。 将打开 新建 Project 对话框

  2. 在左侧窗格中,选择 Nuxt

  3. 在右侧窗格中:

    • 指定存储与项目相关的文件的文件夹路径。

    • Node.js 运行时 字段中,指定要使用的 Node.js 运行时。 从列表中选择一个已配置的运行时,或选择 Add 以配置新的运行时。

    • Nuxt CLI 列表中,选择 npx nuxi@latest ,然后单击 创建

从命令行创建项目

  1. 打开嵌入的 终端Alt+F12 ),然后输入:

    npm create nuxt@latest <project-name>

    yarn create nuxt@latest <project-name>

    pnpm create nuxt@latest <project-name>

  2. 向导会问您一些问题。 在您回答完这些问题后,会在当前文件夹中初始化一个 Nuxt 项目,您可以在 PhpStorm 中使用它。

    Nuxt 项目向导

请在 Nuxt 官方网站 了解更多信息。

Nuxt 感知的编码辅助

PhpStorm 提供代码补全,并显示 快速文档 ,适用于所有 Nuxt 核心组件

针对 Nuxt 组件的补全和快速文档

PhpStorm 还会建议为 Nuxt 组件导入缺失的 import 语句 (Alt+Enter.

用于导入 Nuxt 组件的快速修复

编辑 nuxt.config.ts

PhpStorm 为 nuxt.config.ts 配置文件提供正确的补全建议。

在 nuxt.config.ts 中的代码补全

将鼠标悬停时,您还会看到文档弹出窗口,显示文件中使用的 Nuxt 选项的类型信息。

在 nuxt.config.ts 中的快速文档弹窗

类型检查

Nuxt 4 开箱即具备完整的类型支持。 对于较早的 Nuxt 版本,您需要安装 @nuxt /types 软件包以获得更好的代码补全。

请在 Nuxt 官方网站 了解更多信息。

安装 @nuxt/types 包

  • 如果您使用的是 Nuxt 2.9.0 及更高版本且未安装 @nuxt/types 软件包,PhpStorm 会就此向您发出通知,并建议将其作为开发依赖进行安装。 点击通知弹出窗口中的 将 @nuxt/types 作为开发依赖安装 链接。

    关于缺少 @nuxt/types 的通知

    如果您关闭弹出窗口,仍然可以通过点击 @nuxt/types 工具窗口中的 将 @nuxt/types 作为开发依赖安装 链接 (事件日志) 来安装 查看 | 工具窗口 | 事件日志

  • 或者,打开嵌入的 终端Alt+F12 ),然后输入:

    npm install --save-dev @nuxt/types

最后修改日期: 2025年 12月 5日