# Vue.js

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。
>
>
>
> 所需插件  :
>
>
>
> `JavaScript 和 TypeScript`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。
>
>
>
> `Vue.js`  -  在   设置 | 插件   页面上安装插件。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。

[Vue.js](https://vuejs.org/) 是用于开发用户界面和高级单页应用程序的框架。 IntelliJ IDEA 为 Vue.js 的 HTML、CSS 和 JavaScript 构建模块提供支持，具备 Vue.js 感知的组件 [代码补全](#ws_vue_code_completion)，包括在单独文件中定义的组件、属性、属性、方法、插槽名称等。

借助内置调试器，您可以直接在 IntelliJ IDEA 中调试您的 Vue.js 代码，它可以自动生成您所需的必要运行/调试配置：一个在开发模式下启动开发服务器并启动您的应用程序的 [npm configuration](run-debug-configuration-npm.html) 和一个启动调试会话的 [JavaScript Debug](run-debug-configuration-javascript-debug.html) 配置。

## 开始之前

Procedure:

1. 下载并安装 [Node.js](http://nodejs.org/#download)。

2. 请确保已在您的项目中配置本地 Node.js 运行时：打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到  `语言与框架 | JavaScript 运行时` 。   Node.js 运行时   字段显示项目默认的 Node.js 运行时。 详细信息请参阅 [配置本地 Node.js 解释器](developing-node-js-applications.html#ws_node_configure_local_node_interpreter)。

3. 请确保已在设置中启用  JavaScript 和 TypeScript  插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择  `插件` 。 在搜索字段中，键入  JavaScript 和 TypeScript 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。

4. 安装并启用  Vue.js  插件，该操作在   设置 | 插件   页面上完成，具体请参阅 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo)。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。

## 创建一个新的 Vue.js 应用程序

创建新的 Vue.js 应用的推荐方式是使用 [create-vue](https://github.com/vuejs/create-vue) 官方 Vue 项目脚手架工具，IntelliJ IDEA 会使用 [npx](https://www.npmjs.com/package/npx) 为您下载并运行。

您仍然可以使用 [Vue CLI](https://cli.vuejs.org/)，如果您选择此选项，IntelliJ IDEA 还会下载并运行它  `npx` 。

当然，您可以自己下载其中任何一个工具或创建一个空的 IntelliJ IDEA 项目，并使用 Vue.js 和其他工具（例如 [Vite](https://vitejs.dev/)、 [babel](https://babeljs.io/)、 [webpack](https://webpack.js.org/)、 [ESLint](http://eslint.org/) 等）进行引导。

Procedure:

1. 从主菜单中选择  `文件 | 新建 | 项目` ，或者在   %instance% 主页   屏幕上点击  `新建 | 项目` 。

2. 在   新建项目   对话框的左侧窗格中，选择   Vue.js  。

3. 在右侧窗格中，指定项目名称和创建项目的文件夹。 在   Node.js 运行时   字段中，指定要使用的 Node.js 运行时。 从列表中选择一个已配置的运行时，或选择   添加   以配置新的运行时。

从   Vue CLI   列表中选择   npx --package @vue/cli vue  。

或者，对于 npm 版本 5.1 及更早版本，请在   终端   `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)) 中运行  `npm install --g @vue/cli` ，自行安装  `@vue/cli`  包。 创建应用程序时，选择存储  `@vue/cli`  包的文件夹。

若要使用 [babel](https://babeljs.io/docs/en/) 和 [ESLint](https://eslint.org/) 引导您的应用，请选中   使用默认项目设置   复选框。

4. 当您点击   创建  时，IntelliJ IDEA 会生成一个特定于 Vue.js 的项目，包含所有必需的配置文件并下载所需的依赖。 您可以在   运行   工具窗口中查看进度。

Procedure: 创建一个空的 IntelliJ IDEA 项目

1. 从主菜单中选择  `文件 | 新建 | 项目` ，或者在   %instance% 主页   屏幕上点击  `新建 | 项目` 。

2. 在   新建项目   对话框的左侧窗格中，选择   JavaScript  。

3. 在右侧窗格中，选择   JavaScript  并点击   下一步  。

4. 在向导的第二页中，指定项目名称以及要在其中创建项目的文件夹。

5. 当您点击   创建   时，IntelliJ IDEA 会创建并打开一个  空  project。

Procedure: 在空项目中安装 Vue.js

1. 打开您将使用  Vue.js  的空项目。

2. 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install vue`

> **Tip:**
> 或者，按照 [Vue.js installation instructions](https://vuejs.org/v2/guide/installation.html#NPM)。

## 从现有的 Vue.js 应用程序开始

要继续开发现有的 Vue.js 应用程序，请在 IntelliJ IDEA 中打开它并下载所需的依赖项。

Procedure: 打开本机上已有的应用程序源代码

* 点击   打开或导入   屏幕上的   欢迎   或从主菜单中选择  `文件 | 打开` 。 在打开的对话框中，选择存储源文件的文件夹。

Procedure: 从版本控制系统检出应用程序源代码

1. 在   欢迎   屏幕上点击   克隆存储库  。

或者，从主菜单中选择  `文件 | 新建 | 从版本控制创建项目…` 、  `Git | 克隆…`  或  `VCS | 从版本控制获取` 。

在主菜单中，可能会看到与项目关联的其他任何版本控制系统，而不是   Git  。 例如，   Mercurial   或   Perforce  。

2. 在打开的对话框中，从列表中选择版本控制系统，并指定要从中检出应用程序源代码的仓库。 有关更多信息，请参阅 [检出项目（克隆）](manage-projects-hosted-on-github.html#clone-from-GitHub)。

Procedure: 下载依赖项

* 在弹出窗口中点击   运行 'npm install'   或   运行 'yarn install'  ：

![打开应用程序并下载依赖项](https://resources.jetbrains.com/help/img/idea/2026.3/ws_npm_yarn_package_run_npm_install.png)

您可以使用 [npm](https://docs.npmjs.com/)、 [Yarn 1](https://classic.yarnpkg.com/lang/en/) 或 [Yarn 2](https://yarnpkg.com/)，详情请参阅 [npm 和 Yarn](installing-and-removing-external-software-using-node-package-manager.html)。

* 或者，在编辑器中或在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，从  `package.json`  的上下文菜单中选择   运行 'npm install'   或   运行 'yarn install'  。

### 项目安全

打开在 IntelliJ IDEA 外部创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，可在其中决定如何处理此包含不熟悉源代码的项目。

请选择以下选项之一：

* 在安全模式中预览 ：在这种情况下，IntelliJ IDEA 以预览模式打开项目。 这意味着可以浏览项目的源代码，但无法运行任务和脚本，也无法运行/调试项目。 IntelliJ IDEA 会在编辑器区域顶部显示一条通知，可以点击 信任项目… 链接随时加载项目。

* 信任项目 ：在这种情况下，IntelliJ IDEA 会打开并加载一个项目。 这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能都可用。

* 不打开 ：在这种情况下，IntelliJ IDEA 不会打开项目。

有关更多信息，请参阅 [项目安全](project-security.html)。

> **Tip:**
> 从欢迎屏幕或通过  `文件 | 新建 | 项目`  创建的项目会被自动视为受信任。

## 编写和编辑代码

在  `.vue`  文件中，IntelliJ IDEA 识别  `script` 、  `样式` 和  `模板` 块。 您可以在  `script`  标签中使用 JavaScript 和 TypeScript，在  `样式`  标签中使用样式表语言，并在  `模板`  标签中使用 HTML 和 Pug。

在  `script`  标签内使用 TypeScript 时，IntelliJ IDEA 会调用 [TypeScript 语言服务](https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-API) 进行类型检查，并在   TypeScript   工具窗口的   错误   和   编译错误   选项卡中显示检测到的错误。 或者，您可以按照 [在 Vue.js 组件中使用 TSLint 进行 TypeScript Linting](#ws_vue_linting)中的描述使用 TsLint

### Vue.js 组件

IntelliJ IDEA 能识别  `.vue`  文件类型，并提供用于 Vue.js 组件的专用   .vue   文件模板。

Procedure: 创建一个 Vue.js 组件

1. 在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，选择新组件的父文件夹，然后从列表中选择   Vue 组件  。

2. 在   新建 Vue 组件   弹出窗口中，输入组件文件的名称并选择组件类型：   Composition API   或   Options API  。

![创建一个 Vue.js 组件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_file_template.png)

还可以使用专门的意图操作或重构，从现有 Vue.js 组件中提取新的组件，而无需进行任何复制和粘贴。 所有在新提取的模板中使用的数据和方法都保留在父组件中。 IntelliJ IDEA 将它们连同属性一起传递给新组件，并复制相关样式。

Procedure: 提取组件

1. 选择要提取的模板片段并调用组件提取：

* 要使用意图操作，请按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))，然后从列表中选择 提取 Vue 组件 。

* 要使用重构功能，请从主菜单或选择的上下文菜单中选择 `重构 | 提取 | 提取 Vue 组件` 。

2. 请输入新组件的名称。 如果此名称已被使用或无效，IntelliJ IDEA 会显示警告。 否则，将创建一个新的单文件组件并将其导入父组件。

![提取 Vue 组件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_extract_vue_component.png)

> **Note:**
> 提取 Vue 组件重构仅支持原地操作，因此请确保在   编辑器 | 代码编辑   设置页面 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 上选择了   在编辑器中   重构选项。

### 代码补全

Procedure: 在 script、style 和 template 块中完成代码

* 默认情况下，IntelliJ IDEA 会为  `script`  块中的 ECMAScript 6 提供代码补全，为  `样式`  块中的 CSS 提供代码补全。

![Vue.js：在<script>标签内的 ES6 补全](https://resources.jetbrains.com/help/img/idea/2026.3/vue_js_completion_for_es6_inside_script.png)

* 在  `模板`  标记内，可对 Vue.js 组件和特性使用代码补全、 `Ctrl+Space` (Windows), `⌃ Space` (macOS), `⌃ Space` (IntelliJ IDEA Classic (macOS)), `⌃ Space` (macOS System Shortcuts), `Ctrl+Space` (XWin), `Ctrl+Space` (GNOME), `Ctrl+Space` (KDE), `Alt+/` (Emacs), `Ctrl+Space` (Sublime Text), `⌃ Space` (Sublime Text (macOS)), `Ctrl+Space` (Visual Studio), `⌃ Space` (Visual Studio (macOS)), `Ctrl+Space` (NetBeans), `Ctrl+Space` (Eclipse), `⌃ Space` (Eclipse (macOS)) 以及导航到定义 `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `Ctrl+B` (NetBeans), `F3` (Eclipse), `F3` (Eclipse (macOS))。

![Vue.js：模板标签内部的代码补全](https://resources.jetbrains.com/help/img/idea/2026.3/vue_completion_inside_templates.animated.gif)

Procedure: 完整的 Vue.js 属性和方法

* IntelliJ IDEA 还会建议 Vue.js 属性、  `data`  object 中的属性、计算属性和方法的补全。

![Vue.js：插值完成](https://resources.jetbrains.com/help/img/idea/2026.3/vue_completion_methods.animated.gif)

Procedure: 完整插槽名称

* IntelliJ IDEA 提供了来自库组件和您项目中定义的组件的 [slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots)名称的补全。

如果您的项目包含带有命名插槽的组件，IntelliJ IDEA 会在  `v-slot`  指令中的  `模板`  标签中显示这些名称的建议。

如果您正在使用 [Vuetify](https://vuetifyjs.com/en/)、 [Quasar](https://quasar.dev/) 或 [BootstrapVue](https://bootstrap-vue.js.org/)，插槽名称的代码补全也是可用的。

Procedure: 完成在不同文件中定义的组件

* 如果一个 [组件在多个文件中定义](https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns)，IntelliJ IDEA 会识别组件各部分之间的链接，并为属性、数据和方法提供正确的代码补全。

例如，如果组件的各部分是在单独的 JavaScript 和样式表文件中定义，并在  `vue`  文件中通过  `src`  特性链接，那么 JavaScript 中定义的属性会像方法一样在模板中得到正确补全。

* 组件的  `模板`  属性中的模板字符中的模板字面量会获得自动补全，就像这段代码在  `模板`  标签内一样。

如果模板在单独的 HTML 文件中定义， 然后链接到  `模板`  属性， 也可以使用代码补全功能。

Procedure: 在 Vue.js 注入中完成代码

在 HTML 文件中的 Vue.js 注入中，IntelliJ IDEA 识别 Vue.js 语法并相应地高亮显示您的代码。 您还可以为从 HTML 文件中的 CDN 链接的 Vue.js 库中的符号获取补全，而无需将这些库添加到您的项目依赖项中。

![下载通过 CDN 连接的库](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_completion_download_cdn_lib.png)

1. 打开包含指向外部 Vue.js 库的 CDN 链接的 HTML 文件。 IntelliJ IDEA 突出了该链接。

2. 要启用库的代码补全功能，请按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) 上的链接，然后从列表中选择  `下载库` 。 或者，悬停在链接上并点击   下载库  。

该库已添加到  `设置 | 语言与框架 | JavaScript | 库`  页面上的 JavaScript 库列表中。 有关更多信息，请参阅 [配置通过 CDN 链接添加的库](configuring-javascript-libraries.html#ws_js_external_library_downloaded_from_CDN)。

### Vuex 仓库

IntelliJ IDEA 解析对 [Vuex store](https://vuex.vuejs.org/guide/) 的引用，并为其提供高亮和补全功能。

![Vuex store 的代码补全](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_nuxt_vuex_completion.png)

### 资源

IntelliJ IDEA 会解析以  `static`  格式存储在  `<img src='/logo.png/>`  文件夹中的 [assets](https://nuxt.com/docs/4.x/getting-started/assets) 的所有引用。

### 参数提示

形参提示  会显示方法和函数中的形参名称，使代码更易于阅读。

Procedure: 配置参数提示

1. 打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到  `编辑器 | 内嵌提示` 。

2. 展开   Vue  下的   参数名称  。

3. 通过选择相应的复选框指定您希望显示参数提示的上下文。

预览显示了您在设置中所做的更改如何影响代码外观。

4. 对于某些方法和函数，IntelliJ IDEA 在任何情况下都不会显示参数提示。 请点击   排除列表...  查看这些方法和函数，可能启用参数提示，或者向列表中添加新项目。

5. 要隐藏任意上下文中任意值类型的参数提示，请取消选中   Vue 模板   复选框下的   参数名称  。

### 使用组件导航

使用内嵌提示从组件跳转到其用法。 如果一个组件被多次使用，IntelliJ IDEA 会显示检测到的使用情况列表。 选择相关用法以跳转。

![显示组件用法](https://resources.jetbrains.com/help/img/idea/2026.3/ws_inlay_hints_code_vision_component_usages.animated.gif)

显示组件用法   提示默认显示。 要将其关闭，请按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置并选择   编辑器 | 内嵌提示  。 然后取消选中   组件用法  复选框   代码视图  。

或者，右键点击编辑器中的   显示组件用法   提示，然后选择   隐藏 'Code Vision: 组件用法' 嵌入提示  。

![关闭编辑器中的 Component 用法](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_component_usages_turn_off.png)

### Vue.js 实时模板

借助 IntelliJ IDEA，您可以使用 Sarah Drasner 创建的 [模板集](https://github.com/sdras/vue-vscode-snippets) 中改编的 Vue.js 实时模板集。

Procedure:

1. 请输入要使用的模板缩写，或按 `Ctrl+J` (Windows), `⌘ J` (macOS), `⌘ J` (IntelliJ IDEA Classic (macOS)), `⌘ J` (macOS System Shortcuts), `Ctrl+J` (XWin), `Ctrl+J` (GNOME), `Ctrl+J` (KDE), `Ctrl+J` (Emacs), `Ctrl+J` (Sublime Text), `Ctrl+J` (Sublime Text (macOS)), `Ctrl+K, X` (Visual Studio), `⌘ E, L` (Visual Studio (macOS)), `Ctrl+J` (NetBeans), `Ctrl+Alt+Shift+J` (Eclipse), `Ctrl+J` (Eclipse (macOS)) 并从可用模板列表中选择。

2. 要展开模板，请按 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS))。

3. 在模板内从一个变量移动到另一个变量时，请再次按 `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (NetBeans), `Tab` (Eclipse), `⇥` (Eclipse (macOS))。

![Vue.js 代码片段（动态模板）](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_snippet.animated.gif)

### Vue.js 应用中的 TypeScript

如果您的 Vue.js 项目是用 TypeScript 编写的，您需要选择服务来获取对  `.ts`  和  `.vue`  文件的编码支持。 可以是 [Vue 语言服务器 (Volar)](https://github.com/vuejs/vetur/tree/master/server)，也可以是 IntelliJ IDEA 内部解析器和代码检查。

Procedure:

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `语言与框架 | TypeScript | Vue` 。

2. 指定要使用的服务。

* 要使用 Vue 语言服务器 (Volar)，请接受默认的 自动 选项。

* 要关闭 Vue 语言服务器 (Volar) 并从 IntelliJ IDEA 内部支持获取编码辅助，请选择 已禁用 。

3. 选择   启用服务驱动的类型引擎   复选框，以根据 Vue 语言服务器中的数据评估符号类型。

默认情况下，该复选框已清除，因此类型评估、解析、代码检查和重构操作基于 IntelliJ IDEA 内部 TypeScript 引擎中的类型信息。

此默认行为可能会导致性能问题和类型解析中的错误，因为 IntelliJ IDEA 内部 TypeScript 引擎使用的类型评估算法不同于 Vue 语言服务器的算法。 选中该复选框可能有助于避免这些问题。

> **Note:**
> 如果   TypeScript 语言服务   复选框在 [TypeScript 页面](settings-languages-typescript.html) 上被选中，并且 Vue 语言服务器处于   自动   状态，则无论   启用服务驱动的类型引擎   复选框是选中还是清除，部分代码高亮显示和补全始终都会从相应的语言服务获取。

#### Vue.js 应用程序中的 TypeScript 7 (Vue/Kolar)

IntelliJ IDEA 提供对 Kolar 的支持，可在 TypeScript 7 上下文中确保代码补全、导航、代码检查、快速修复、查找用法、嵌入提示、类型信息和快速文档。

Procedure:

1. 请确保使用 Vue3 和 TypeScript 6+。

2. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后转到  `设置 | 语言 & 框架 | TypeScript` 。

3. 从   TypeScript   列表中选择   TypeScript 7 (原生)  。

![启用 TypeScript 7 (原生)](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_typescript_kolar.png)

#### 配置内存处理

尽管 IntelliJ IDEA 致力于提供与语言服务的顺畅集成，但仍可能出现由语言服务而非 IntelliJ IDEA 本身引发的  内存不足  错误。

为防止出现  内存不足 错误或使其得到无缝解决，从而确保语言服务稳定运行，您可以配置内存处理。 通过 [语言服务](language-services.html) 了解详情。

针对 Vue 语言服务的内存处理设置始终从 TypeScript 语言服务继承。

Procedure:

1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后转到  `设置 | 语言 & 框架 | TypeScript` 。

2. 在   语言服务内存   区域中，选择内存处理模式:

* 在 语言服务内存 区域中，选择 如果可用，自动增加内存 以增加内存并静默重启语言服务。

* 或者，选择 设置内存限制 并指定语言服务可使用的最大内存。 如果指定的内存大小超过可用 RAM，IntelliJ IDEA 会在工具提示中建议适当的值。 > **Note:** > 确保计算机有足够的可用 RAM。 如果分配量已经很高，例如 8GB+，请考虑 [升级/降级](language-services.html#ls_upgrade_downgrade)或 [限制项目作用域](language-services.html#ls_limit_project_scope)。

### 在 Vue.js 应用中的格式化

Procedure: 配置缩进

默认情况下，顶级标签内的代码会以 Vue.js 特有的风格进行统一缩进。 您可以将此缩进配置为依赖于所使用的语言，例如，特定于 HTML 或 Pug。

1. 在   设置  对话框( `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)))中，转到  `编辑器 | 代码样式 | Vue 模板` ，并打开   制表符和缩进  选项卡。

2. 默认情况下，所有顶级标签的内容都会以特定于 Vue.js 的风格统一缩进。 接受默认的缩进设置或使用页面上的控件自定义它们。 当您更改设置时，右窗格中的   预览   会显示这些更改如何影响代码格式。

要使顶级标签内的代码根据其语言缩进，请选择   特定于块中的语言  。

3. 在   缩进顶级选项卡的子选项卡  字段中，指定代码应有初始缩进的顶级标签。

默认情况下，只有在  `模板`  选项卡内的代码具有初始缩进。 如有必要，使用逗号作为分隔符添加其他选项卡。 例如，如果您在字段中指定  `script` ，则所有  `script`  选项卡内的代码会如   预览   面板所示获得初始缩进。

Procedure: 配置 spaces

1. 默认情况下，IntelliJ IDEA 会在大括号的开头 (  `{` ) 和结尾 (  `}` ) 之间自动插入空格，适用于 [使用 Mustache 语法的 Vue.js 文本插值](https://vuejs.org/v2/guide/syntax.html#Text)。

要禁止自动插入空格，请打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 代码样式 | Vue 模板` ，然后打开   空格   选项卡并清除   插值处理   复选框。

2. 默认情况下，当您在块注释中封闭一个代码片段时，文本会在打开  `/*`  字符后立即开始，没有任何空格。 在关闭  `*/`  字符前都没有插入空格。

这种默认的代码样式可能与一些代码检查工具的规则发生冲突，例如，ESLint。 要优化代码风格，请配置起始和结束区块注释中的前后空格。

在   设置  对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))）中，请转到  `编辑器 | 代码样式 | JavaScript` 或  `编辑器 | 代码风格 | TypeScript` ，打开   代码生成  选项卡，并在   注释  区域配置空格和格式。

Procedure: 配置换行和大括号

1. 在   设置  对话框( `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)))中，转到  `编辑器 | 代码样式 | Vue 模板` ，并打开   换行和大括号  选项卡。

2. 如果一个 Vue.js 插值内的 [JavaScript 表达式](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions) 有换行符，IntelliJ IDEA 将自动从新的一行开始此 JavaScript 表达式，并在其后添加新的一行。

清除   在 '{{' 后换行   和   在 '}}' 前换行   复选框以改变此默认行为。

> **Tip:**
> 这些复选框不会影响没有内部换行的 JavaScript 表达式。 例如，  `{{ foo }}`  不会自动拆分。

3. 按照 [Vue.js 代码风格：视觉指南](code-style-vue.html#ws_vue_formatting_options)中的描述配置多个右边距。

4. 在 [换行选项](code-style-vue.html#ws_code_style_wrapping_options) 中配置插值换行。

### 使用 Prettier 格式化 Vue.js 代码

可以配置 Prettier，使其在特定文件发生更改且更改已自动或手动保存时重新格式化该文件，请参阅 [保存时自动运行 Prettier](prettier.html#ws_prettier_run_automatically_in_current_project)。

此外，可以为特定文件将 Prettier [设置为默认格式化程序](prettier.html#ws_prettier_default_formatter)。 每次使用 `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS)) 重新格式化代码时，它都会针对这些文件运行。

有关更多信息，请参见 [使用 Prettier 重新格式化代码。?](prettier.html#ws_prettier_reformat_code)。

Procedure:

* 在编辑器中，选择要重新格式化的代码片段。 要重新格式化文件或文件夹，请在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中选择它。 然后从上下文菜单中选择   使用 Prettier 重新格式化  。

* 要自动对特定文件运行 Prettier，请打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `语言与框架 | JavaScript | Prettier` ，并使用   代码重新格式化   和   保存时   复选框指定将触发 Prettier 的操作。

有关更多信息，请参阅 [保存时自动运行 Prettier](prettier.html#ws_prettier_run_automatically_in_current_project) 和 [将 Prettier 设置为默认格式化程序](prettier.html#ws_prettier_default_formatter)。

IntelliJ IDEA 可以将 Prettier 配置中的关键代码样式规则应用到 IntelliJ IDEA 的代码样式设置，以便使生成的代码（例如重构或快速修复后）与已由 Prettier 处理的代码保持一致的格式。

Procedure: 应用 Prettier 代码样式规则

* 在启用了 Prettier 的项目中，打开  `package.json` ，然后点击选项卡顶部窗格中的   是  。

![package.json 上方的窗格：应用 Prettier 代码样式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_prettier_apply_code_style_pane.png)

* 要重新应用 Prettier 代码样式（在窗格中点击   否   或修改代码样式之后），请按 `Ctrl+Shift+A` (Windows), `⌘ ⇧ A` (macOS), `⌘ ⇧ A` (IntelliJ IDEA Classic (macOS)), `⌘ ⇧ P` (macOS System Shortcuts), `Ctrl+Shift+A` (XWin), `Ctrl+Shift+A` (GNOME), `Ctrl+Shift+A` (KDE), `Escape, X` (Emacs), `Ctrl+Shift+P` (Sublime Text), `⌘ ⇧ P` (Sublime Text (macOS)), `Ctrl+Shift+A` (Visual Studio), `⌘ ⇧ A` (Visual Studio (macOS)), `Ctrl+I` (NetBeans), `Ctrl+Shift+A` (Eclipse), `⌘ 3` (Eclipse (macOS))，然后选择   应用 Prettier 代码样式规则  （位于   查找操作   列表中）。

### 使用 TSLint 对 Vue.js 组件中的 TypeScript 进行代码检查

您可以使用 [typescript-tslint-plugin](https://github.com/microsoft/typescript-tslint-plugin) 对 Vue.js 单文件组件中的 TypeScript 代码进行代码检查。

由于  `typescript-tslint-plugin`  仅适用于当前项目中安装的 TypeScript，请确保在   TypeScript   页面上的   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))）中的   TypeScript   字段中选择了项目  `node_modules`  文件夹中的  `typescript`  包。

> **Tip:**
> 有关 TypeScript 版本的更多信息，请参阅 [配置与 TypeScript 语言服务的集成](typescript-support.html#ws_ts_version)。

Procedure: 安装和配置 typescript-tslint-plugin

1. 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install --save-dev typescript-tslint-plugin`

2. 在您的  `plugins`  文件的  `tsconfig.json`  属性中，输入：

```JSON
{
  "compilerOptions": {
    "plugins": [{"name": "typescript-tslint-plugin"}]
  }
}
                    
```

3. 使用  `typescript-tslint-plugin`  时，TSLint 通过 [TypeScript 语言服务](https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-API) 运行，因此您可以禁用与 IntelliJ IDEA 的 TSLint 集成，以避免重复的错误报告。

为此，请打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `语言与框架 | TypeScript | TSLint` ，并选择   禁用 TSLint  。

## 运行 Vue.js 应用程序

Procedure:

1. 点击 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)（位于  `dev`  脚本旁的装订区域，该脚本在  `package.json`  中），或者执行  `npm run dev`  命令（在   终端   `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)) 中），或者双击  `dev`  任务（在 [npm 工具窗口](npm-tool-window.html)（  `查看 | 工具窗口 | npm` ）中）。

2. 等待应用程序编译完成且开发服务器就绪。

运行   工具窗口或   终端   会显示应用程序正在运行的 URL。 如果应用程序是使用 create-vue 生成的，则默认 URL 为  `http://localhost:5173/` 。 点击此链接查看应用程序。

![Vue.js 应用正在以开发模式运行](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_run_app_url.png)

### 通过运行/调试配置运行 Vue.js 应用程序

对于使用  `create-vue` 在IntelliJ IDEA   新建项目  向导中 [如上所述](#ws_vue_create_new_app)创建的应用程序，IntelliJ IDEA会生成一个默认名称为   dev  的 [npm](run-debug-configuration-npm.html)配置。 此配置会运行  `vite`  命令，该命令将启动开发服务器并以开发模式启动应用程序。

在其他情况下，您需要手动 [创建一个运行/调试配置](#vue_running_and_debugging_run_via_rc_create_rc)，并设置实际的参数，如主机、端口等。

Procedure: 创建一个 npm 运行/调试配置

1. 前往  `运行 | 编辑配置` 。 或者，在工具栏上的   运行   小部件中选择   编辑配置  。

![打开编辑配置对话框](https://resources.jetbrains.com/help/img/idea/2026.3/vue_run_config_create.png)

在打开的   编辑配置  对话框中，点击工具栏上的   添加  按钮（ !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)），然后从列表中选择   npm  。

2. 在打开的   配置   对话框的   运行/调试配置：npm   选项卡中，指定  `package.json` 、Node.js 运行时以及要使用的包管理器的位置。

在   命令   字段中，从列表中选择   run  ，然后从   脚本   列表中选择要运行的脚本。 它很可能是默认的  `dev`  脚本，但可以在  `package.json`  中配置另一个脚本，例如，在自定义端口上运行应用程序。

![npm 运行/调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/vue_debug_npm_rc.png)

3. 可选：

要在浏览器中打开应用程序，请按照以下步骤更新配置：在   浏览器 / Live Edit   选项卡中，选中   在启动后   复选框，选择要在其中打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。

如果要调试应用程序，请选择 [Google Chrome](http://www.google.com/chrome/) 或其他 [基于 Chromium 的浏览器](https://www.chromium.org/)。

![Browser / Live Edit 选项卡：选择浏览器](https://resources.jetbrains.com/help/img/idea/2026.3/vue_run_rc_browser_tab_select_browser.png)

Procedure: 运行应用程序

1. 从工具栏上的   运行   小部件的列表中，选择一种   npm   类型的运行配置，然后点击旁边的 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)。 这可以是自动生成的   dev  配置或您自己创建的自定义配置 [如上所述](#vue_running_and_debugging_run_via_rc_create_rc)。

![从运行小组件中选择 dev 配置](https://resources.jetbrains.com/help/img/idea/2026.3/vue_run_select_dev_rc.png)

2. 等待应用程序编译完成且开发服务器就绪。

运行   工具窗口或   终端   会显示应用程序正在运行的 URL。 如果应用程序是使用 create-vue 生成的，则默认 URL 为  `http://localhost:5173/` 。 点击此链接查看应用程序。

![Vue.js 应用正在以开发模式运行](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_run_app_url.png)

或者，启用 IntelliJ IDEA 以在启动时打开应用程序 [如上所述](#ws_vue_start_app_in_dev_mode_enable_opening_browser)。

> **Note:**
> 当开发服务器正在运行时，您的应用程序会在您更改任意源文件并保存更新后自动重新加载。

## 调试 Vue.js 应用程序

> **Note:**
> Vue.js 应用程序的调试仅支持在 [Google Chrome](http://www.google.com/chrome/) 和其他 [基于 Chromium 的浏览器](https://www.chromium.org/) 中进行。

您可以通过 [启动运行/调试配置](#vue_debug_with_rc)或 [从运行工具窗口](#vue_debug_from_tw)，该窗口显示您的应用程序在开发模式下运行的 URL，开始调试会话。

### 通过运行/调试配置开始调试

要调试您的 Vue.js 应用程序，您需要两个运行/调试配置：

* 在开发模式下启动应用程序的 npm 配置， [如上所述](#vue_running_and_debugging_run)。

* 用于将调试器附加到以开发模式运行的应用程序的 JavaScript Debug 配置。 > **Note:** > 如果您使用 `create-vue` 生成了您的应用程序， [如上所述](#ws_vue_create_new_app)，IntelliJ IDEA 已经生成了这两个运行/调试配置。

您可以在   JavaScript Debug   配置内创建   npm   配置来同时启动它们，如 [使用 npm run/debug 配置运行和调试 Vue 应用程序](#vue_debug_two_rc) 中所述。

或者，分别启动   npm   和   JavaScript Debug   运行/调试配置，如 [使用 JavaScript Debug 运行/调试配置开始调试](#vue_debug_via_js_debug_rc) 中所述。

Procedure: 通过单个 npm run/debug 配置运行和调试 Vue.js 应用程序

1. 在代码中设置 [断点](using-breakpoints.html)。

2. 创建   npm   配置， [如上所述](#vue_running_and_debugging_run_via_rc_create_rc)。

如果您使用  `create-vue`  生成了应用程序，IntelliJ IDEA 已经使用默认名称   npm dev   创建了一个   npm   配置。 此配置可通过   运行  小部件或   运行/调试配置  对话框获得。

3. 在打开的   配置   对话框的   运行/调试配置：npm   选项卡中，指定  `package.json` 、Node.js 运行时以及要使用的包管理器的位置。

在   命令   字段中，从列表中选择   run  ，然后从   脚本   列表中选择要运行的脚本。 它很可能是默认的  `dev`  脚本，但可以在  `package.json`  中配置另一个脚本，例如，在自定义端口上运行应用程序。

![npm 运行/调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/vue_debug_npm_rc.png)

4. 在   浏览器 / Live Edit   选项卡中，选中   在启动后   复选框，从列表中选择 [Google Chrome](http://www.google.com/chrome/) 或其他 [Chromium-based browser](https://www.chromium.org/)，选中   使用 JavaScript 调试器   复选框，然后指定您的应用程序将运行的 URL。

![npm 配置，浏览器标签](https://resources.jetbrains.com/help/img/idea/2026.3/vue_debug_npm_rc_browser_tab.png)

5. 点击   运行  。

要重新运行该配置，请从   运行   微件中的列表中选择它，然后点击其旁边的 ![运行](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.execute.svg)。

IntelliJ IDEA 在开发模式下运行应用程序，同时启动调试会话。

![调试会话](https://resources.jetbrains.com/help/img/idea/2026.3/vue_debug_npm_rc_debugging_session.png)

6. 当第一个断点被触发时，切换到 [调试工具窗口](debug-tool-window.html)并按常规操作： [逐步执行程序](stepping-through-the-program.html)， [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行， [在挂起时检查程序](examining-suspended-program.html)，探索调用堆栈和变量，设置监视，评估变量， [查看实际的 HTML DOM](viewing-actual-html-dom.html)，等等。

要忽略源代码映射并逐步执行实际运行的代码，请在   调试  工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。

Procedure: 使用 JavaScript Debug 运行/调试配置开始调试

1. 在代码中设置 [断点](using-breakpoints.html)。

2. 启动应用程序的开发模式 [，如上所述](#vue_running_and_debugging_run_steps)，并等待应用程序编译完成以及开发服务器就绪。

运行   工具窗口或   终端   会显示应用程序正在运行的 URL。 请复制此 URL 到 [稍后在 JavaScript Debug 配置中指定](#vue_debug_specify_URL)。

![Vue.js 应用正在以开发模式运行](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_run_app_url.png)

3. 创建一个   JavaScript Debug  配置。 要执行此操作，请在主菜单中转到  `运行 | 编辑配置` ，点击 !["添加"图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)，然后从列表中选择   JavaScript 调试  。

如果您使用  `create-vue`  生成了您的应用程序，IntelliJ IDEA 已经创建了一个   JavaScript Debug   运行/调试配置，默认名称为   调试应用程序  ，默认 URL 为  `http://localhost:5173` 。 从   JavaScript Debug   节点下的列表中选择此 run/debug 配置。

![选择生成的 JavaScript 调试运行/调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/vue_debug_select_js_debug_rc.png)

4. 在打开的   运行/调试配置：JavaScript Debug  对话框中，指定配置的名称以及应用程序在开发模式下运行的 URL 地址。 您可以在   运行   工具窗口或   终端   中复制此 URL， [如上所述](#vue_debug_dev_mode_URL)。

![创建一个 JavaScript 调试配置：指定 URL](https://resources.jetbrains.com/help/img/idea/2026.3/vue_debug_create_js_debug_rc.png)

> **Note:**
> 如果您正在使用自动生成的配置，请确保指定的网址是您的应用程序实际运行的地址。

5. 点击   调试  。

要重新运行该配置，请从   运行   微件中的列表中选择它，然后点击其旁边的 ![调试](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg)。

![从运行小部件运行 JavaScript Debug 配置](https://resources.jetbrains.com/help/img/idea/2026.3/vue_debug_rerun_js_debug_rc.png)

6. 当第一个断点被触发时，切换到 [调试工具窗口](debug-tool-window.html)并按常规操作： [逐步执行程序](stepping-through-the-program.html)， [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行， [在挂起时检查程序](examining-suspended-program.html)，探索调用堆栈和变量，设置监视，评估变量， [查看实际的 HTML DOM](viewing-actual-html-dom.html)，等等。

要忽略源代码映射并逐步执行实际运行的代码，请在   调试  工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。

### 从 Run 工具窗口或内置 Terminal 开始调试

如果应用程序在  `本地主机`  上以开发模式运行，尤其是使用  `create-vue`  生成的应用程序，可以直接从   >运行   工具窗口或内置   终端   启动调试会话。

Procedure:

1. 在代码中设置 [断点](using-breakpoints.html)。

2. 启动应用程序的开发模式 [，如上所述](#vue_running_and_debugging_run)，并等待应用程序编译完成以及开发服务器就绪。

3. 运行   工具窗口或   终端   会显示应用程序正在运行的 URL。 按住 `Ctrl+Shift` (Windows), `Ctrl+Shift` (macOS), `Ctrl+Shift` (IntelliJ IDEA Classic (macOS)), `Ctrl+Shift` (macOS System Shortcuts), `Ctrl+Shift` (XWin), `Ctrl+Shift` (GNOME), `Ctrl+Shift` (KDE), `Ctrl+Shift` (Emacs), `Ctrl+Shift` (Sublime Text), `Ctrl+Shift` (Sublime Text (macOS)), `Ctrl+Shift` (Visual Studio), `Ctrl+Shift` (Visual Studio (macOS)), `Ctrl+Shift` (NetBeans), `Ctrl+Shift` (Eclipse), `Ctrl+Shift` (Eclipse (macOS)) 并点击此 URL 链接。 IntelliJ IDEA 将使用自动生成的   调试应用程序   配置启动调试会话，该配置的类型为 [JavaScript Debug](run-debug-configuration-javascript-debug.html)。

![从运行工具窗口开始调试会话](https://resources.jetbrains.com/help/img/idea/2026.3/ws_start_debugging_from_run_tool_window.animated.gif)

如果从 [新终端](terminal-emulator.html) 以开发模式启动了应用程序，只需点击链接旁边的   在浏览器中启动调试   按钮即可。

![新终端：在浏览器中开始调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/ws_start_debugging_from_new_terminal_start_debugging_button.png)

默认情况下，不显示该按钮。 要显示该按钮，请打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `高级设置` ，然后在   JavaScript 和 TypeScript   区域选择   在终端中为本地主机链接显示“在浏览器中开始调试”按钮   复选框。

> **Note:**
> 该按钮在 WSL 中的   新终端   不可用。

当第一个断点被触发时，切换到 [调试工具窗口](debug-tool-window.html)并按常规操作： [逐步执行程序](stepping-through-the-program.html)， [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行， [在挂起时检查程序](examining-suspended-program.html)，探索调用堆栈和变量，设置监视，评估变量， [查看实际的 HTML DOM](viewing-actual-html-dom.html)，等等。

要忽略源代码映射并逐步执行实际运行的代码，请在   调试  工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。

### 针对 Node.js 17+ 的故障排除

如果在应用中使用 Nuxt ，且您的 Node.js 版本为 17 或更高版本，在调试会话期间，您可能会遇到网络连接问题。 这可能会导致调试器附加或加载 sourcemaps 时出现问题。

解决方法是通过更新  `dev`  脚本，在您的  `package.json`  中将  `--host 127.0.0.1`  传递给服务器，如下所示：

```JSON
"dev": "nuxt --hostname=127.0.0.1"

```

## 在一个项目中使用多个框架

有时您可能需要在一个 Vue.js 项目中使用其他框架。

要在每个文件中获得上下文感知的编码辅助，请创建一个配置文件  `.ws-context` ，并指定每个特定文件或文件夹应使用的框架。 此文件中的设置将重写默认配置。

Procedure:

1. 在项目根目录中，从上下文菜单中选择   新建 | 文件  并将文件名指定为  `.ws-context` 。

2. 在  `.ws-context` 中，使用两种属性：

* `<context-name>` 带有上下文值字符串

* 具有上下文详情对象的 GLOB 模式

3. 使用以下上下文值：

* `framework` ： `vue` 、 `angular` 、 `react` 、 `svelte` 、 `astro`

* `angular-template-syntax` : `V_2` 、 `V_17`

* `nextjs-project` ： `nextjs`

* `astro-project` ： `astro`

* `vue-store` : `vuex` 、 `pinia`

* `vue-class-component-library` ： `vue-class-component` 、 `vue -property-decorator` 、 `vue-facing-decorator`

* `jsdoc-dialect` : `jsdoc-typescript` 、 `jsdoc-closure`

4. 使用路径嵌套以简化操作。

* GLOB 路径的最后一段是文件名模式，它仅支持 `*` 通配符。

* 如果最后一个段是一个 `**` ，它匹配所有嵌套的目录和文件。

* 顶层上下文属性应具有 `/**` 模式。

5. 当多个模式匹配相同文件名时，将使用以下规则进行消歧：

* 选择路径段数最多的模式，排除 `**` 段。

* 选择纯文件名模式，这意味着它不会以 `**` 或 `/` 结尾。

* 选择最先定义的模式。

### 示例

假设您有一个项目，其中在各个文件夹中使用了多个框架。

![具有不同框架的项目](https://resources.jetbrains.com/help/img/idea/2026.3/several_frameworks_context_project_structure.png)

要为项目中的每个文件获得上下文相关的帮助，请将以下代码添加到  `.ws-context` :

```JSON
{
  "framework": "vue",
  "angular-template-syntax": "V_2",
  "src/**/app/**": {
    "framework": null,
    "app.component.html" : {
      "framework": "angular",
      "angular-template-syntax": "V_17"
    }
  },
  "src/**/p*-editor/*.html" : {
    "framework" : "angular"
  }
}
        
```

## See also

### Web 资源

[WebStorm blog: Initial support for Vue](https://blog.jetbrains.com/webstorm/2017/02/webstorm-2017-1-eap-171-2822/) [WebStorm blog: Completion and navigation for Vue components](https://blog.jetbrains.com/webstorm/2017/02/webstorm-2017-1-eap-171-3224/)

### 过程

[npm、pnpm 和 Yarn](installing-and-removing-external-software-using-node-package-manager.html)