Vite

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

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

3. 在右侧窗格中：

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

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

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

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

   4. 从 模板 列表中，选择适用于您将要在应用程序中使用的框架的 community maintained Vite template。

   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 配置的位置。

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

     如果您的 Vite 配置文件名称未被 PyCharm 识别，请参阅上面的 已识别的 Vite 配置名称列表。

     

创建一个 npm 运行/调试配置

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

   

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

2. 在弹出的 配置 选项卡 运行/调试 配置：npm 对话框中，指定 package.json 的位置、Node.js 解释器及要使用的软件包管理器。

   在 命令 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 很可能它将是默认的 dev 脚本，但您可以在您的 package.json 中配置另一个脚本，例如，在自定义端口上运行应用程序。

   

3. 可选：

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

   如果您要调试应用程序，请选择 Google Chrome 或另一个 Chromium-based browser。

   

运行应用程序

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

   

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

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

   

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

使用单个 npm run/debug 配置运行和调试 Vite 应用程序

1. 在您的代码中设置 breakpoints。

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

   如果您使用 create-vite 生成了应用程序，PyCharm 已经使用默认名称 npm dev 创建了一个 npm 配置。 此配置可通过 运行 小部件或 运行/调试配置 对话框获得。

   

3. 在弹出的 配置 选项卡 运行/调试 配置：npm 对话框中，指定 package.json 的位置、Node.js 解释器及要使用的软件包管理器。

   在 命令 字段中，从列表中选择 运行 ，然后从 脚本 列表中选择要运行的脚本。 很可能它将是默认的 dev 脚本，但您可以在您的 package.json 中配置另一个脚本，例如，在自定义端口上运行应用程序。

   

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

   

5. 点击 运行。

   要重新运行配置，请从 运行 小部件中的列表中选择，然后点击其旁边的 。

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

   

6. 当第一个断点被触发时，切换到 调试工具窗口 并像往常一样继续： 逐步执行程序、 停止和恢复程序执行、 在暂停时检查 、探索调用堆栈和变量、设置监视、评估变量、 查看实际的 HTML DOM 等。

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

1. 在您的代码中设置 breakpoints。

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

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

   

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

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

   

5. 点击 调试。

   要重新运行配置，请从 运行 小部件中的列表中选择，然后点击其旁边的 。

   

6. 当第一个断点被触发时，切换到 调试工具窗口 并像往常一样继续： 逐步执行程序、 停止和恢复程序执行、 在暂停时检查 、探索调用堆栈和变量、设置监视、评估变量、 查看实际的 HTML DOM 等。

1. 在您的代码中设置 breakpoints。

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

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

   

   如果您从 New Terminal 以开发模式启动了应用程序，您只需点击链接旁边的 在浏览器中开始调试 按钮即可。