专业的

Vue.js

创建 Vue.js 组件

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

  

提取成分

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

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

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

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

   

   动图

笔记

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

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

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

  

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

  

  动图

完整的 Vue.js 属性和方法

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

  

  动图

完整插槽名称

• PyCharm 提供了库组件和项目中定义的组件的插槽名称的补全功能。

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

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

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

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

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

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

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

Vue.js 注入中的完整代码

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

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

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

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

配置参数提示

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

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

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

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

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

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

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

2. 要展开模板，请按。Tab

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

   

   动图

1. 在“设置”对话框 ( ) 中，转至语言和框架 | TypeScript | 维埃。CtrlAlt0S

2. 指定要使用的服务。

   • 默认情况下，选择自动选项。在此模式下，PyCharm 会检测项目中使用的 TypeScript 版本并启用与适当服务的集成。

     • 对于 TypeScript 5.0.0 及更高版本，PyCharm 下载@vue/language-server包并使用 Vue 语言服务器 (Volar)。

     • 对于早期版本的 TypeScript，使用 TypeScript 语言服务。了解更多信息 配置与 TypeScript 语言服务的集成。

   • 如果您选择Vue Language Server (Volar) ，PyCharm 将始终通过与 Vue Language Server 集成在.ts和.vue文件中提供编码帮助，无论您使用哪个版本的 TypeScript。

     请注意，Vue 语言服务器编码帮助将仅限于错误突出显示。代码完成和导航将由 PyCharm 内部支持提供。

   • 选择TypeScript以始终​​在.ts和.vue文件中使用 TypeScript 语言服务。

     请注意，TypeScript 语言服务不适用于 TypeScript 5.0.0 及更高版本。因此，如果您的项目使用这些版本之一，将通过 PyCharm 内部代码检查提供错误突出显示。

   • 选择“禁用”可关闭 TypeScript 语言服务和 Vue 语言服务器，并从 PyCharm 内部支持获得编码帮助。

3. 在“Vue 语言服务器”字段中，指定要使用的 Vue 语言服务器版本。

   • 接受建议的默认版本。

   • 如果您安装了另一个版本的@vue/language-server软件包，则该版本会出现在列表中。您可以选择它或接受默认版本。

     

   • 或者，单击选择或并指定自定义包的路径@vue/language-server。

配置缩进

默认情况下，顶级标签内的代码按照 Vue.js 特定的样式统一缩进。您可以根据所使用的语言配置此缩进，例如 HTML 或 Pug 特定的缩进。

1. 在“设置”对话框 ( ) 中，转到编辑器 | 代码风格| Vue Template，然后打开制表符和缩进选项卡。CtrlAlt0S

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

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

3. 在“顶级标记的缩进子级”字段中，指定代码应具有初始缩进的顶级标记。

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

配置空间

1. 默认情况下，PyCharm 在使用 Mustache 语法的 Vue.js 文本插值{中自动在左大括号 ( ) 后面和右大括号 ( })之前插入空格。

   要禁止自动插入空格，请打开“设置”对话框 ( )，转至编辑器 | 代码风格| Vue Template，然后打开Spaces选项卡并清除Interpolations复选框。CtrlAlt0S

2. 默认情况下，当您将代码片段括在块注释中时，文本将在起始/*字符之后立即开始，不带任何空格。在结束*/字符之前也不插入空格。

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

   在“设置”对话框 ( ) 中，转到编辑器 | 代码风格| JavaScript或编辑器 | 代码风格| TypeScript，打开代码生成选项卡，并在注释区域中配置空格和格式。CtrlAlt0S

配置包装和大括号

1. 在“设置”对话框 ( ) 中，转到编辑器 | 代码风格| Vue Template，然后打开“包裹和大括号”选项卡。CtrlAlt0S

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

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

   提示

   这些复选框不会影响内部没有换行符的 JavaScript 表达式。例如，{{ foo }}无论如何都不会自动分割。

3. 配置多个右边距，如Vue.js 代码风格：视觉指南中所述。

4. 配置插值中的环绕，如环绕选项中所述。

使用 Prettier 重新格式化代码

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

• 要针对特定​​文件自动运行 Prettier，请打开“设置”对话框 ( )，转至语言和框架 | JavaScript | Prettier，并使用代码重新格式化时和保存时复选框指定将触发 Prettier 的操作。CtrlAlt0S

  有关更多信息，请参阅保存时自动运行 Prettier和将 Prettier 设置为默认格式化程序。

应用 Prettier 代码风格规则

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

  

• 要重新应用 Prettier 代码样式（在窗格中单击“否”或修改代码样式后），请按 并从“查找操作”列表中选择应用 Prettier 代码样式规则。CtrlShift0A

安装和配置 typescript-tslint-plugin

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

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

2. 在tsconfig.jsonplugins文件的属性中，输入：

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

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

   为此，请打开“设置”对话框 ( )，转至语言和框架 | TypeScript | TSLint，然后选择禁用 TSLint。CtrlAlt0S

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

   或者，npm run dev在终端 中运行或双击npm 工具窗口( View | Tool Windows | npm )中的任务。AltF12dev

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

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

   

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

调试使用 create-vue 创建的应用程序

1. 在代码中设置断点。

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

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

   

   动图

调试在本地主机上运行的应用程序

1. 在代码中设置断点。

2. 如上所述以开发模式启动应用程序，或者通过运行并等待应用程序编译完毕并且开发服务器准备就绪。

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

   

   动图

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

1. 在代码中设置断点。

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

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

4. 创建JavaScript调试配置。然后，请转到“运行”|“主菜单上的“编辑配置”，单击，然后从列表中选择“JavaScript调试”。在“运行/调试配置：JavaScript调试”对话框箱子，将保存的URL粘贴到URL字段中并保存配置。

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