Vite

1. 从主菜单中点击 文件 | 新建 | 项目。 或者，在欢迎界面的左侧窗格中，点击 新建 | 新建项目。

   新建 项目 对话框 打开。

2. 在左侧窗格，选择 Vite。

3. 在右侧窗格中：

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

   2. 在 Node 运行时 字段中，指定要使用的 Node.js 运行时。 从列表中选择已配置的运行时，或选择 添加 来配置新的运行时。

   3. 从 Vite 列表中，选择 npx create-vite.

      或者，对于 npm 5.1 及更早版本，请在 终端 Alt+F12 中运行 npm install --g create-vite ，以自行安装 create-vite 包。 创建应用程序时，选择存储 create-vite 包的文件夹。

   4. 在 模板 列表中，选择面向您将在应用中使用的框架的 社区维护的 Vite 模板。

   5. 可选：

      要使用 TypeScript 而非 JavaScript，请选中 使用 TypeScript 模板 复选框。 PyCharm 将为您的应用程序生成 .ts 文件以及一个 tsconfig.json 配置文件。

4. 点击 创建 后，PyCharm 会生成一个特定于 Vite 的项目，包含所有必需的配置文件，并下载所需的依赖项。 此外，PyCharm 还会创建带有用于运行应用的默认设置的 npm dev 配置。

创建空白 PyCharm 项目

1. 从主菜单中点击 文件 | 新建 | 项目。 或者，在欢迎界面的左侧窗格中，点击 新建 | 新建项目。

   新建 项目 对话框 打开。

2. 在左侧窗格，选择 空 项目。 在右侧窗格，指定应用程序文件夹并点击 创建。

在空白项目中安装 Vite

1. 打开您将在其中使用 Vite 的空白 项目。

2. 在内置的 终端 （Alt+F12 ）中，键入：

   npm install --save-dev vite

选择检测 Vite 配置的方式

1. 打开 设置 对话框（Ctrl+Alt+S ），然后转到 语言与框架 | JavaScript | Vite。

2. 在 检测用于模块解析的 Vite 配置文件 区域，选择以下选项之一：

   • 自动： 在此模式下，对于 JavaScript 或 TypeScript 文件，PyCharm 将首先在该 JavaScript 或 TypeScript 文件所在的文件夹中查找 Vite 配置文件，然后在其父文件夹中查找，依此类推。

     因此，如果您的项目由多个使用不同 Vite 配置的模块组成，每个模块都将使用其自身 Vite 配置文件中的模块解析规则（如果找到该配置）。

     PyCharm 按以下名称和顺序识别 JavaScript 或 TypeScript 的 Vite 配置文件：

     • vite.config.js / vite.config.ts

     • vite.config.mjs

     • vite.config.cjs

   • 手动： 在 配置文件 字段中，指定要使用的 Vite 配置文件的位置。

     在此模式下，指定配置文件中的解析规则将应用于项目中的所有模块。

     如果 PyCharm 无法识别您的 Vite 配置文件名，请选择此选项，参见上文的 已识别的 Vite 配置文件名列表。

     

创建 npm 运行/调试配置

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

   

   在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（ ），然后从列表中选择 npm。

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

   在 Command 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 通常会使用默认的 dev 脚本，但您可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用程序。

   

3. 可选：

   要在浏览器中打开应用程序，请按以下方式更新配置：在 浏览器/实时编辑 选项卡中，选择 启动后 复选框，选择用于打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。

   如果您要调试该应用，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。

   

运行应用程序

1. 在工具栏的列表中选择 npm dev 运行配置，并点击其旁边的 。

   

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

   运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 点击此链接以查看应用。

   

   或者，启用 PyCharm 在启动时打开应用程序， 如上所述。

使用单个 npm 运行/调试配置运行并调试 Vite 应用

1. 设置 断点 在您的代码中。

2. 创建一个 npm 配置 如上所述。

   如果您使用 create-vite 生成了应用程序， PyCharm 已经创建了一个默认名称为 npm dev 的 npm 配置。 该配置可从 运行 小部件以及 运行/调试配置 对话框中使用。

   

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

   在 Command 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 通常会使用默认的 dev 脚本，但您可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用程序。

   

4. 在 浏览器/实时编辑 选项卡中，选择 启动后 复选框，从列表中选择 Google Chrome 或其他 基于 Chromium 的浏览器 ，选择 使用 JavaScript 调试器 复选框，然后指定应用程序将运行的 URL。

   

5. 单击 运行。

   要重新运行该配置，请在 运行 小部件的列表中选择它，并点击其旁边的 。

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

   

6. 当第一个断点被触发时，切换到 Debug 工具窗口 并按常规操作： 逐步执行程序、 停止并恢复程序执行、 在挂起时进行检查 、探索调用堆栈和变量、设置监视、计算变量、 查看实际 HTML DOM ，等等。

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

1. 设置 断点 在您的代码中。

2. 在开发模式下启动应用程序， 如上所述 ，并等待应用程序编译完成并且开发服务器已就绪。

   运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 复制此 URL 以便 在 JavaScript Debug 配置中稍后指定。

   

3. 创建 JavaScript 调试 配置。 为此，请在主菜单中转到 运行 | 编辑配置 ，点击 ，然后从列表中选择 Javascript 调试。

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

   

5. 单击 调试。

   要重新运行该配置，请在 运行 小部件的列表中选择它，并点击其旁边的 。

   

6. 当第一个断点被触发时，切换到 Debug 工具窗口 并按常规操作： 逐步执行程序、 停止并恢复程序执行、 在挂起时进行检查 、探索调用堆栈和变量、设置监视、计算变量、 查看实际 HTML DOM ，等等。

1. 设置 断点 在您的代码中。

2. 在开发模式下启动应用程序， 如上所述 ，并等待应用程序编译完成并且开发服务器已就绪。

3. 运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 按住 Ctrl+Shift 并点击此 URL 链接。 PyCharm 会使用自动生成的类型为 JavaScript Debug 的 配置启动调试会话。

   

   如果您是在开发模式下从 新建终端 启动了应用程序，您只需点击链接旁的 在浏览器中启动调试 按钮。