使用IDEA创建Vue3通过Vite实现工程化

本节介绍控件。有关如何创建项目的分步说明，请参阅 Vite。

名字	指定项目的名称。
位置	指定要在其中创建项目的目录的路径。默认情况下，IDE 会创建一个与项目同名的目录。
节点解释器	指定要在此项目中使用的 Node.js 解释器。您可以从列表中选择已配置的解释器，或单击“添加”以配置新的解释器。 如果计算机上没有 Node.js，请从列表中选择下载 Node.js。
维特	从 Vite 列表中选择 npx create-vite。 或者，对于 npm 版本 5.1 及更早版本，通过在终端中运行自行安装包create-vitenpm install --g create-vite AltF12.创建应用程序时，请选择存储包的文件夹。create-vite
模板	选择社区维护的 Vite 模板，该模板以您将在应用程序中使用的框架为目标。

最终

维特最后修改日期：11 年 2023 月 <> 日

仅在 IntelliJ IDEA Ultimate 中可用：下载以试用或比较版本

所需插件：

JavaScript and TypeScript， - 插件仅在 IntelliJ IDEA Ultimate 中可用，默认情况下它们处于启用状态。Vite

IntelliJ IDEA 集成了 Vite 构建工具，可改善前端开发体验。Vite 由一个开发服务器和一个构建命令组成。生成服务器通过本机 ES 模块提供源文件。build 命令将您的代码与 Rollup 捆绑在一起，Rollup 已预先配置为输出高度优化的静态资产以用于生产。

IntelliJ IDEA 支持 Vue 标签中的 tsconfig.json 和 jsconfig.json 路径映射，并识别 Vite 别名。style

在由多个具有不同 Vite 配置的模块组成的项目中，IntelliJ IDEA 可以自动检测每个模块的相关配置文件，并使用其中的模块解析规则，请参阅下面的指定要使用的 Vite 配置文件。

IntelliJ IDEA 与 Vite 的集成要求将包安装在您的项目中或全局安装。因此，请使用 create-vite 创建应用程序或手动安装 vite 包。要使用现有的 Vite 应用，请确保 package.json 在运行 之前列出 Vite。vitenpm install

准备工作

1. 下载并安装 Node.js。

2. 确保在 “设置”|”“插件”页面，“已安装”选项卡。有关更多信息，请参阅管理插件。

创建新的 Vite 应用程序

启动新 Vite 应用程序的推荐方法是 create-vite 包，IntelliJ IDEA 使用 npx 下载并运行该包。因此，您的开发环境已预先配置为使用 Vite 和流行框架之一的基本模板。

当然，你仍然可以自己下载或创建一个空的 IntelliJ IDEA 项目并在其中安装 Vite。create-vite

从 Vite.js 官方网站了解有关从 Vite 开始的更多信息。

使用 create-vite 生成 Vite 应用程序

1. 选择“文件”|”新品 |项目，或单击“欢迎”屏幕上的“新建项目”按钮。

2. 在“新建项目”对话框中，选择左侧窗格中的“Vite”。

3. 在右侧窗格中：

   • 指定项目名称和要在其中创建项目的文件夹。

   • 在“节点解释器”字段中，指定要使用的 Node.js 解释器。从列表中选择已配置的解释器，或选择“添加”以配置新解释器。

   • 从 Vite 列表中选择 npx create-vite。

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

   • 从“模板”列表中，选择社区维护的 Vite 模板，该模板面向要在应用程序中使用的框架。

   • 选择：

     若要使用 TypeScript 而不是 JavaScript，请选中“使用 TypeScript 模板”复选框。IntelliJ IDEA 将为您的应用程序生成 .ts 文件和 tsconfig.json 配置文件。

4. 单击“创建”时，IntelliJ IDEA 会生成一个特定于 Vite 的项目，其中包含所有必需的配置文件，并下载所需的依赖项。IntelliJ IDEA 还使用默认设置创建 npm start 和 JavaScript 调试配置，用于运行或调试应用程序。

或者，打开内置终端并键入：

1. npx create-vite <application-name>以创建应用程序。

2. cd <application-name>切换到应用程序文件夹。

3. npm start启动 Node.js 服务器。

在空的 IntelliJ IDEA 项目中安装 Vite

在这种情况下，必须自行配置生成管道。从 Vite 官方网站了解有关将 Vite 添加到项目的更多信息。

创建一个空的 IntelliJ IDEA 项目

1. 选择“文件”|”新品 |项目，或单击“欢迎”屏幕上的“新建项目”按钮。

2. 在“新建项目”对话框中，选择左侧窗格中的“新建项目”。

3. 在右侧窗格中，选择“语言”区域中的“JavaScript”。

4. 为新项目命名并根据需要更改其位置，然后单击“创建”。

在空项目中安装 Vite

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

2. 在嵌入式终端中 (AltF12） ， 类型：

   npm install --save-dev vite

从现有的 Vite 应用程序开始

要继续开发现有的 Vite 应用程序，请在 IntelliJ IDEA 中打开它并下载所需的依赖项。

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

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

从版本控制中签出应用程序源

1. 单击欢迎屏幕上的“从 VCS 获取”。

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

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

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

下载依赖项

1. 确保您的 package.json 在 或 下列出了包。这是必要的，因为 IntelliJ IDEA 与 Vite 的集成，尤其是自动检测配置文件，要求将软件包安装在您的项目中或全局安装。vitedependenciesdevDependenciesvite

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

   

   可以使用 npm、Yarn 1 或 Yarn 2，详见 npm 和 Yarn。

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

项目安全

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

选择以下选项之一：

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

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

• 信任项目：在本例中，IntelliJ IDEA 打开并加载一个项目。这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能都可用。

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

有关详细信息，请参阅项目安全性。

从欢迎屏幕或通过“文件”|”新品 |中所述的项目将自动被视为受信任。

在 IntelliJ IDEA 中配置 Vite

创建 Vite 配置文件

• 根据项目结构创建一个或多个配置文件：在“项目”工具窗口中选择父文件夹，然后选择“新建”|”JavaScript 文件。

  

  可接受的名称为 vite.config.js/vite.config.ts、vite.config.mjs 或 vite.config.cjs。

  从 Vite 官方网站了解更多信息。

• 如有必要，稍后将在语句中识别该值。请确保在别名的定义中指定绝对路径。从 Vite 官方网站了解更多信息。aliasimport

  

  GIF动图

指定要使用的 Vite 配置文件

基于对 Vite 配置文件的分析，IntelliJ IDEA 可以理解 Vite 配置，解析模块，并在 JavaScript 和 TypeScript 文件中提供编码帮助。

在 IntelliJ IDEA 中，您可以在两种配置模式之间进行选择——自动和手动。

通过自动配置，IntelliJ IDEA 会自动检测每个 JavaScript 或 TypeScript 文件的相关 Vite 配置文件。

通过手动配置，您可以指定要在项目中使用的 Vite 配置文件。如果 IntelliJ IDEA 无法识别 Vite 配置文件的名称，手动配置很有用，请参阅下面的已识别 Vite 配置名称列表。

选择如何检测 Vite 配置

1. 打开“设置”对话框 （CtrlAlt0S），然后转到“语言和框架”|”JavaScript的 |维特。

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

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

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

     IntelliJ IDEA 可识别具有以下名称和顺序的 JavaScript 或 TypeScript Vite 配置文件：

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

     • vite.config.mjs

     • vite.config.cjs

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

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

     如果 IntelliJ IDEA 无法识别 Vite 配置文件的名称，请选择此选项，请参阅上面已识别的 Vite 配置文件名称列表。