IntelliJ IDEA
 
2023.2
快捷方式：Windows
获取 IntelliJ IDEA
  1. 非 JVM 技术
  2. JavaScript
  3. Vue.js

最终的
Vue.js

最后修改时间：2023 年 10 月 6 日

仅在 IntelliJ IDEA Ultimate 中可用：下载以尝试或比较版本

所需插件：

JavaScript and TypeScript, Vue.js - 这些插件仅在 IntelliJ IDEA Ultimate 中可用，默认情况下启用。

Vue.js是一个用于开发用户界面和高级单页应用程序的框架。IntelliJ IDEA 为 HTML、CSS 和 JavaScript 的 Vue.js 构建块提供支持，并为组件提供 Vue.js 的完整读取代码，包括单独的文件、属性、属性、方法、槽名称等中定义的组件。

使用内置调试器，您可以直接在 IntelliJ IDEA 中调试 Vue.js 代码，它可以自动生成您所需的必要运行/调试配置：启动开发服务器并在开发模式下启动应用程序的npm配置，以及启动调试会话的JavaScript调试配置。

在你开始之前

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

创建新的Vue.js应用程序的推荐方法是create-vue官方Vue项目脚手架工具，IntelliJ IDEA使用npx下载并运行该工具。

您仍然可以使用Vue CLI，如果您选择此选项，IntelliJ IDEA 又下载并运行它npx。

当然，您可以自己下载这些工具，或者创建一个空的 IntelliJ IDEA 项目并使用 Vue.js 和其他工具（例如Vite、babel、webpack、ESLint等）引导它。

创建一个空的 IntelliJ IDEA 项目

  1. 选择文件|新建|从主菜单进行项目或单击点击屏幕上的“新建项目”按钮。

  2. 在“新建项目”中选择对话框，在右边的第八个中选择“JavaScript”。

  3. 在右边，选择JavaScript并单击下一步。

  4. 在左右的第二页上，指定项目名称并要在其中创建项目的文件夹。

  5. 单击“完成”后，IntelliJ IDEA 将创建并打开一个空项目。

在空项目中安装Vue.js

  1. 打开将在其中使用Vue.js 的空项目。

  2. 在嵌入式终端( ) 中，键入：AltF12

    npm install vue

提示

或者，按照Vue.js安装说明进行操作。

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

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

打开计算机上已有的应用程序源

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

从版本控制中检查应用程序源

  1. 点击欢迎屏幕上的从VCS获取。

    或者，选择文件 |新 |来自版本控制或 Git 的项目|从主菜单克隆...。

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

  2. 在打开的对话框中，从列表中选择您的版本控制系统，并指定用于检查应用程序源的存储库。有关更多信息，请参阅查看项目（克隆）。

下载依赖项

  1. 在弹出窗口中单击运行“npm install”或运行“yarn install” ：

    打开 Angular 应用程序并从 package.json 下载依赖项

    您可以使用npm、Yarn 1或Yarn 2 ，详细信息请参阅npm 和 Yarn 。

  2. 从编辑器或项目工具窗口中package.json的上下文菜单中选择运行“npm install”或运行“yarn install”。

项目安全

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

不可信项目警告

选择以下选项之一：

  • 在安全模式下预览：在这种情况下，IntelliJ IDEA 以预览模式打开项目。这意味着您可以浏览项目的源代码，但无法运行任务和脚本或运行/调试项目。

    IntelliJ IDEA 在编辑器区域顶部显示一条通知，您可以单击“信任项目...”链接并随时加载您的项目。

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

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

从项目安全中了解更多信息。

提示

从欢迎屏幕或通过文件 |创建的项目 新 | 中描述的项目将自动被视为可信。

编写和编辑您的代码

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

当您在标签内使用 TypeScript 时script，IntelliJ IDEA 会调用TypeScript 语言服务进行类型检查，并在TypeScript工具窗口的错误和编译错误选项卡中显示检测到的错误。或者，您可以使用 TsLint，如使用 TSLint 在 Vue.js 组件中检查 TypeScript中所述

Vue.js 组件

IntelliJ IDEA 可以识别.vue文件类型，并为 Vue.js 组件提供专用的.vue文件模板。

创建 Vue.js 组件

  • 在 “项目”工具窗口中，选择新组件的父文件夹，然后从列表中选择“Vue 组件” 。

    创建 Vue.js 组件

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

提取成分

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

    • 要使用意图操作，请按，然后从列表中选择“提取 Vue 组件” 。AltEnter

    • 要使用重构，请选择Refactor | 摘录| 从主菜单或所选内容的上下文菜单中提取 Vue 组件。

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

    /help/img/idea/2023.2/ws_extract_vue_component.png
    动图

笔记

Extract Vue 组件重构只能就地进行，因此请确保在编辑器|编辑器中选择了在编辑器中重构选项。IDE 设置的 代码编辑页面。CtrlAlt0S

代码完成

脚本、样式和模板块内的完整代码

  • script默认情况下，IntelliJ IDEA 为 ECMAScript 6 内部块和 CSS 内部块提供代码完成style。

    Vue.js：<script> 标签内的 ES6 补全

  • 在标签内，可以使用template代码补全以及导航至 Vue.js 组件和属性的定义。CtrlSpaceCtrl0B

    /help/img/idea/2023.2/vue_completion_inside_templates.png
    动图

完整的 Vue.js 属性和方法

  • IntelliJ IDEA 还建议完成 Vue.js 属性、data对象中的属性、计算属性和方法。

    /help/img/idea/2023.2/vue_completion_methods.png
    动图

完整插槽名称

  • IntelliJ IDEA为库组件和项目中定义的组件的槽名称提供补全功能。

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

  • 如果您使用Vuetify、Quasar或BootstrapVue，还可以使用插槽名称的代码完成功能。

在单独的文件中定义的完整组件

  • 如果一个组件在多个文件中定义，IntelliJ IDEA 会识别组件各部分之间的链接，并为属性、数据和方法提供正确的代码完成。

    例如，如果组件的各个部分在单独的 JavaScript 和样式表文件中定义，这些文件通过属性在vue文件中链接src，则 JavaScript 中定义的属性将像方法一样在模板中正确完成。

  • 组件属性中的模板文字内的模板template会完成，就像此代码位于标签内一样template。

    如果在单独的 HTML 文件中定义模板然后链接到属性，则也可以完成template。

Vue.js 注入中的完整代码

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

下载通过 CDN 链接的库

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

  2. 要启用库的完成功能，请按链接并从列表中选择下载库。或者，将鼠标悬停在链接上并单击“下载库”。AltEnter

该库已添加到“设置”| “JavaScript 库”列表中。语言和框架 | JavaScript | 图书馆页面。有关更多信息，请参阅配置通过 CDN 链接添加的库。

参数提示

参数提示显示方法和函数中的参数名称，使代码更易于阅读。默认情况下，仅对文字或函数表达式的值显示参数提示，但对命名对象不显示参数提示。

配置参数提示

  1. 打开“设置”对话框 ( ) 并转到编辑器 | 镶嵌提示。CtrlAlt0S

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

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

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

  4. 对于某些方法和函数，IntelliJ IDEA 不会在任何上下文中显示参数提示。单击排除列表...查看这些方法和函数，可能为它们启用参数提示，或将新项目添加到列表中。

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

Vue.js 实时模板

借助 IntelliJ IDEA，您可以使用改编自Sarah Drasner 创建的集合的 Vue.js 实时模板集合。

Vue.js 应用程序中的 Nuxt.js

借助 IntelliJ IDEA，您可以在 Vue.js 应用程序中使用Nuxt.js框架。在 IntelliJ IDEA 中设置Nuxt.js应用程序的推荐方法是使用 create-nuxt-app 命令。或者，您可以在现有项目中安装Nuxt.js。

使用 create-nuxt-app 创建项目

在现有项目中安装 Nuxt.js

安装@nuxt/types包

使用该@nuxt/types包，您可以获得更好的代码完成效果。

Nuxt.js 感知编码帮助

IntelliJ IDEA 建议代码完成并显示所有核心 Nuxt.js 组件的快速文档。

Nuxt 组件的完成和快速文档

IntelliJ IDEA 解析对Vuex 存储的引用并为它们提供突出显示和补全。

Vuex 商店的代码完成

IntelliJ IDEA 解析对存储在静态文件夹中的资源的所有引用。<img src='/logo.png/>

编辑 nuxt.config.js

IntelliJ IDEA 为nuxt.config.js配置文件提供正确的补全建议。

nuxt.config.js 中的代码完成

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

nuxt.config.js 中的快速文档弹出窗口

模块分辨率

IntelliJ IDEA 支持 Nuxt.js 特定的 Webpack 设置。从 Nuxt.js 2.12.0 开始，IntelliJ IDEA 自动查找webpack.config.js配置文件并使用其中的模块解析规则来提供编码帮助。