Pycharm
 
2023.3
快捷方式：Windows
获取 PyCharm
  1. 语言和框架
  2. JavaScript
  3. Vue.js

专业的
Vue.js

最后修改时间：2023年11月30日

仅适用于 PyCharm Professional：下载以尝试或 比较版本

所需插件：

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

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

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

在你开始之前

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

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

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

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

创建一个空的 PyCharm 项目

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

  2. 在左边一个中，选择“空项目”。

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

  4. 当您单击“创建”时，PyCharm 将创建并打开一个空项目。

在空项目中安装Vue.js

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

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

    npm install vue

提示

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

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

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

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

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

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

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

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

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

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

下载依赖项

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

    开放应用程序并下载依赖项

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

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

项目安全

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

不可信项目警告

选择以下选项之一：

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

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

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

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

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

提示

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

编写和编辑您的代码

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

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

Vue.js 组件

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

创建 Vue.js 组件

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

    创建 Vue.js 组件

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

提取成分

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

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

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

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

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

笔记

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

代码完成

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

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

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

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

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

完整的 Vue.js 属性和方法

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

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

完整插槽名称

  • 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 库中获取符号的补全，而无需将这些库添加到项目依赖项中。

通过CDN链接下载的库

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

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

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

参数提示

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

配置参数提示

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

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

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

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

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

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

Vue.js 实时模板

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

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

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

使用 create-nuxt-app 创建项目

在现有项目中安装 Nuxt.js

安装@nuxt/types包

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

Nuxt.js 感知编码帮助

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

Nuxt 组件的完整且快速的文档

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

Vuex 商店的代码完成

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

编辑 nuxt.config.js

PyCharm 为nuxt.config.js配置文件提供正确的完成建议。

nuxt.config.js 中的代码完成

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

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

模块分辨率

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

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

Vue.js 应用程序中的 TypeScript