PhpStorm 2021.3 Help

Vue.js

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

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

在你开始前

  1. 下载并安装Node.js。

  2. 确保在Settings/Preferences |上启用了JavaScript 和 TypeScript以及Vue.js所需的插件。插件页面,选项卡Installed,有关详细信息,请参阅管理插件

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

创建新 Vue.js 应用程序的推荐方法是Vue CLI,PhpStorm 使用 npx 为您下载和运行

当然,你仍然可以自己下载 Vue CLI 或者创建一个空的 PhpStorm 项目并使用 Vue.js 和其他工具引导它,例如babelwebpackESLint等。

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

  2. 在左侧窗格中,选择Vue.js

  3. 在右侧窗格中:

    1. 指定将存储项目相关文件的文件夹的路径。

    2. Node Interpreter字段中,指定要使用的 Node.js 解释器。从列表中选择一个已配置的解释器或选择添加以配置一个新解释器。

    3. Vue CLI列表中,选择npx --package @vue/cli vue

      或者,对于 npm 5.1 及更早版本,通过在终端@vue/cli中运行自己安装包。创建应用程序时,选择存储包的文件夹。npm install --g @vue/cli Alt+F12@vue/cli

    4. 要使用babelESLint引导您的应用程序,请选中Use the default project setup复选框。

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

创建一个空的 PhpStorm 项目

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

  2. 在左侧窗格中,选择Empty Project

  3. 指定将存储项目相关文件的文件夹的路径。

  4. 当您单击Create时,PhpStorm 创建并打开一个项目。

在空项目中安装 Vue.js

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

  2. 在嵌入式终端( Alt+F12) 中,键入:

    npm install vue

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

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

打开您机器上已有的应用程序源

  • 欢迎屏幕上单击打开或选择文件 | 从主菜单打开目录。在打开的对话框中,选择存储源的文件夹。

从您的版本控制中查看应用程序源

  1. 欢迎屏幕上单击从 VCS 获取。或者,选择文件 | 来自版本控制<Your_VCS> 的项目 | 从主菜单中获取版本控制。

    <Your_VCS> 代表与您当前打开的项目相关联的版本控制系统。

  2. 在打开的对话框中,从列表中选择您的版本控制系统并指定要从中签出应用程序源的存储库。有关详细信息,请参阅签出项目(克隆)

下载依赖项

  • 在弹出窗口中单击Run 'npm install'Run 'yarn install' :

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

    您可以使用npmYarn 1Yarn 2,有关详细信息,请参阅npm 和 Yarn

  • 在编辑器或项目工具窗口中,从package.json的上下文菜单中选择Run 'npm install'Run 'yarn install' 。

项目安全

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

不受信任的项目警告

选择以下选项之一:

  • 在安全模式下预览:在这种情况下,PhpStorm 以“预览模式”打开项目,这意味着您可以浏览项目的源代码,但不能运行任务和脚本或运行/调试项目。

    PhpStorm 在编辑器区域顶部显示通知,您可以单击Trust project链接并随时加载您的项目。

  • 信任项目:在这种情况下,PhpStorm 打开并加载一个项目。这意味着项目已初始化,项目的插件已解决,依赖项已添加,并且所有 PhpStorm 功能都可用。

  • 不要打开:在这种情况下,PhpStorm 不会打开项目。

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

编写和编辑您的代码

.vue文件中,PhpStorm 识别scriptstyletemplate块。您可以在标签内使用 JavaScript 和 TypeScript,在script标签内使用样式表语言,在style标签内使用 HTML 和 Pug template

当您在script标签中使用 TypeScript 时,PhpStorm 会调用TypeScript 语言服务进行类型检查,并在TypeScript工具窗口的错误编译错误选项卡中显示检测到的错误。或者,您可以使用 TsLint,如Linting TypeScript in Vue.js components using TSLint

Vue.js 组件

PhpStorm 识别.vue文件类型并为 Vue.js 组件提供专用的.vue文件模板。

创建一个 Vue.js 组件

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

    ws_vue_file_template.png

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

提取组件

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

    • 要使用意图操作,请按Alt+Enter,然后从列表中选择提取 Vue 组件。

    • 要使用重构,请选择Refactor | 提取物 | 从主菜单或选择的上下文菜单中提取 Vue 组件。

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

    ws_extract_vue_component.png

代码完成

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

  • 默认情况下,PhpStorm 为块内的 ECMAScript 6script和块内的 CSS提供代码完成style

    Vue.js:在 <script> 标签内完成 ES6
  • template标签内,可以使用代码完成Ctrl+Space和导航到Ctrl+BVue.js 组件和属性的定义。

    Vue.js:模板标签内的补全

完整的 Vue.js 属性和方法

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

    Vue.js:插值的完成

完整的插槽名称

  • PhpStorm 为来自库组件和项目中定义的组件的插槽名称提供补全。

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

  • 如果您使用的是VuetifyQuasarBootstrapVue,还可以使用插槽名称的代码完成。

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

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

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

  • 组件属性中的模板文字内的模板template可以完成,就像这段代码在template标签内一样。

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

Vue.js 注入中的完整代码

在 HTML 文件中的 Vue.js 注入中,PhpStorm 识别 Vue.js 语法并相应地突出显示您的代码。您还可以完成从 HTML 文件中的 CDN 链接的 Vue.js 库中的符号,而无需将这些库添加到您的项目依赖项中。

下载通过 CDN 链接的库
  1. 打开带有指向外部 Vue.js 库的 CDN 链接的 HTML 文件。PhpStorm 突出显示该链接。

  2. 要启用库的完成,请按Alt+Enter链接并从列表中选择下载库。或者,将鼠标悬停在链接上,然后单击下载库

该库被添加到Settings/Preferences |上的 JavaScript 库列表中。语言和框架 | JavaScript | 库页面,有关详细信息,请参阅配置通过 CDN 链接添加的库

参数提示

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

配置参数提示

  1. 打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Editor | 镶嵌提示 | Vue

  2. 从列表中选择参数提示,确保选中显示参数提示复选框,然后指定要显示参数提示的上下文。

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

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

Vue.js 实时模板

借助 PhpStorm,您可以使用一系列适用于 Vue.js 的 Live 模板,这些模板改编自Sarah Drasner 创建的集合

  1. 键入要使用的模板的缩写或按下Ctrl+J并从可用模板列表中选择它。

  2. 要展开模板,请按Tab

  3. 要在模板内从一个变量移动到另一个变量,请再按Tab一次。

    Vue.js 代码片段(实时模板)

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

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

使用 create-nuxt-app 创建项目

  1. 创建一个空的 PhpStorm 项目。

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

    2. 在左侧窗格中,选择 PHP Empty Project。在右侧窗格中,指定应用程序文件夹并单击Create

  2. 打开嵌入式终端( Alt+F12) 并键入:

    npx create-nuxt-app <project name>

    要么

    yarn create nuxt-app <project name>

  3. 向导会问您一些问题。回答完这些问题后,Nuxt 项目会在当前文件夹中初始化,并准备好在 PhpStorm 中使用。

Nuxt.js 官方网站了解更多信息。

在现有项目中安装 Nuxt.js

  • 打开嵌入式终端( Alt+F12) 并键入:

    npm install --save nuxt

安装 @nuxt/types 包

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

  • 如果您使用的是 2.9.0 以后的 Nuxt.js 版本并且没有安装该@nuxt/types软件包,PhpStorm 会通知您并建议将其安装为开发依赖项。单击通知弹出窗口中的Install @nuxt/types 作为开发依赖项链接。

    关于缺少@nuxt/types 的通知

    如果关闭弹出窗口,您仍然可以@nuxt/types通过单击事件日志工具窗口(查看 | 工具窗口 | 事件日志)中的Install @nuxt/types as dev 依赖项链接进行安装。

  • 或者,打开嵌入式终端( Alt+F12) 并键入:

    npm install --save-dev @nuxt/types

Nuxt.js 感知编码帮助

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

Nuxt 组件的完成和快速文档

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

Vuex 商店的代码完成

PhpStorm 以格式解析对存储在静态文件夹中的资产的所有引用。<img src='/logo.png/>

编辑 nuxt.config.js

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

nuxt.config.js 中的代码完成

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

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

模块分辨率

PhpStorm 支持 Nuxt.js 特定的 webpack 设置。从 Nuxt.js 2.12.0 开始,PhpStorm 会自动查找webpack.config.js配置文件,并使用其中的模块解析规则进行编码辅助。

关于使用 webpack.config.js 进行模块解析和代码完成的通知

Vue.js 应用程序中的格式化

配置缩进

默认情况下,顶级标签中的代码以 Vue.js 特定的样式统一缩进。您可以将此缩进配置为取决于所使用的语言,例如,是 HTML 或 Pug 特定的。

  1. Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Editor | 代码风格 | Vue Template,然后打开Tabs and Indents选项卡。

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

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

  3. Indent children of top-level tag字段中,指定代码应具有初始缩进的顶级标记。

    默认情况下,只有标签内的template代码具有初始缩进。如有必要,使用逗号作为分隔符添加其他标签。例如,如果您script在字段中指定,则所有script标签内的代码都会获得初始缩进,如预览窗格中所示。

配置空间

  1. 默认情况下,PhpStorm 会在带有 Mustache 语法的 Vue.js 文本插值中,在左大括号 ( {) 之后和右大括号 ( ) 之前自动插入空格。}

    要自动禁止插入空格,请打开Settings/Preferences对话框 ( Ctrl+Alt+S),转到Editor | 代码风格 | Vue Template,然后打开Spaces选项卡并清除Interpolations复选框。

  2. 默认情况下,当您将代码片段包含在块注释中时,文本会在开始/*字符之后开始,没有任何空格。在结束*/字符之前也没有插入空格。

    此默认代码样式可能与某些 linter 的规则冲突,例如 ESLint。要改进代码样式,请在前导和尾随空格中配置封闭块注释。

    Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Editor | 代码风格 | JavaScript编辑器 | 代码风格 | TypeScript,打开Code Generation选项卡,并在Comments区域配置空格和格式。

配置换行和大括号

  1. Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Editor | 代码风格 | Vue Template,然后打开Wrapping and Braces选项卡。

  2. 如果Vue.js 插值中的 JavaScript 表达式有换行符,PhpStorm 会自动从新行开始此 JavaScript 表达式并在其后添加新行。

    清除“{{”之后新行和“}}”之前的新行复选框以更改此默认行为。

  3. 按照Vue.js 代码样式:可视指南中所述配置多个右边距。

  4. Wrapping options中所述配置插值中的换行。

使用 Prettier 重新格式化 Vue.js 代码

您可以配置 Prettier 以在每次更改特定文件时重新格式化特定文件,并自动或手动保存更改。

此外,Prettier 可以设置为特定文件的默认格式化程序。每次您使用Ctrl+Alt+L.

有关详细信息,请参阅使用 Prettier 重新格式化代码

使用 Prettier 重新格式化代码

  • 在编辑器中,选择要重新格式化的代码片段。要重新格式化文件或文件夹,请在“ 项目”工具窗口中选择它。然后从上下文菜单中选择Reformat with Prettier 。

  • 要针对特定​​文件自动运行 Prettier,请打开Settings/Preferences对话框 ( Ctrl+Alt+S),转到Languages and Frameworks | JavaScript | Prettier,并使用On code reformattingOn save复选框指定将触发 Prettier 的操作。

    有关详细信息,请参阅保存时自动运行 Prettier将 Prettier 设置为默认格式化程序

PhpStorm 可以将 Prettier 配置中的关键代码样式规则应用到 PhpStorm 代码样式设置中,以便生成的代码(例如,重构或快速修复后)和已经使用 Prettier 处理的代码格式一致。

应用更漂亮的代码样式规则

  • 在启用 Prettier 的项目中,打开package.json并单击选项卡顶部窗格中的Yes 。

    package.json 上方的窗格:应用 Prettier 代码样式
  • 要重新应用 Prettier 代码样式(在您单击窗格中的或修改代码样式之后),请按并从Find Action列表中Ctrl+Shift+A选择Apply Prettier Code Style Rules 。

使用 TSLint 在 Vue.js 组件中检查 TypeScript

您可以使用typescript-tslint-plugin对 Vue.js 单个文件组件中的 TypeScript 代码进行 lint 。

因为typescript-tslint-plugin仅适用于当前项目中安装的 TypeScript,请确保在“设置/首选项”对话框 ( )的TypeScript页面上的TypeScript字段中选择typescript项目node_modules文件夹中的包。Ctrl+Alt+S

安装和配置 typescript-tslint-plugin

  1. 在嵌入式终端( Alt+F12) 中,键入:

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

  2. tsconfig.jsonplugins文件的属性中,键入:

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

  3. 当您使用typescript-tslint-plugin时,TSLint 通过TypeScript 语言服务运行,因此您可以禁用 TSLint 与 PhpStorm 的集成以避免重复错误报告。

    为此,请打开设置/首选项对话框 ( Ctrl+Alt+S),转到语言和框架 | 打字稿 | TSLint,然后选择禁用 TSLint

运行和调试 Vue.js 应用程序

对于如上所述使用 Vue CLI 创建的应用程序,PhpStorm 使用默认设置生成两个运行/调试配置:

  • 具有默认名称npm servenpm 配置。此配置运行启动开发服务器并以开发模式启动应用程序的命令。npm serve

  • 默认名称为Debug ApplicationJavaScript 调试配置。此配置启动调试会话。

运行 Vue.js 应用程序

  1. 从工具栏上的列表中选择npm serve运行配置,然后单击跑步列表旁边的。

    或者,npm start终端 Alt+F12中运行或双击npm 工具窗口start中的任务(查看 | 工具窗口 | npm)。

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

    运行工具窗口或终端显示应用程序运行的 URL,默认为http ://localhost:8080/。单击此链接以查看应用程序。

    Vue.js 应用程序正在运行

当开发服务器运行时,只要您更改任何源文件并保存更新,您的应用程序就会自动重新加载。

调试 Vue.js 应用程序

您可以根据应用程序的创建方式和运行位置以不同方式启动调试会话。

调试使用 Vue CLI 创建的应用程序

  1. 在代码中设置断点

  2. 如上所述以开发模式启动应用程序,并等待应用程序编译完成并且开发服务器准备就绪。

  3. 从列表中选择自动生成的调试应用程序配置,然后单击列表调试按钮旁边的。

    为使用 Vue CLI 创建的 Vue.js 应用程序启动调试器

调试在 localhost 上运行的应用程序

  1. 在代码中设置断点

  2. 如上所述以开发模式启动应用程序,并等待应用程序编译完成并且开发服务器准备就绪。

  3. 运行工具窗口或终端显示应用程序运行的 URL,默认为http ://localhost:8080/。按住Ctrl+Shift并单击此 URL 链接。PhpStorm 使用自动生成的JavaScript Debug类型的调试应用程序配置启动调试会话。

    从运行工具窗口启动调试会话

调试在自定义 URL 上运行的应用程序

  1. 在代码中设置断点

  2. 如上所述以开发模式启动应用程序,并等待应用程序编译完成并且开发服务器准备就绪。

  3. 运行工具窗口或终端显示应用程序正在运行的URL。复制此 URL 地址,稍后您将在调试配置中指定它。要查看您的应用程序,只需单击链接。

  4. 创建一个JavaScript 调试配置。为此,请转到运行 | 在主菜单上编辑配置,单击,然后从列表中添加图标选择JavaScript 调试。在“运行/调试配置:JavaScript 调试”对话框中,将保存的 URL 粘贴到URL字段中并保存配置。

  5. 要启动新创建的配置,请从配置列表中选择它,然后单击调试按钮列表旁边的。

当第一个断点被命中时,切换到调试工具窗口并像往常一样继续:单步执行程序暂停和恢复程序执行,暂停时检查它,探索调用堆栈和变量,设置监视,评估变量,查看实际 HTML DOM等等。

最后修改:2022 年 1 月 17 日