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

1、创建Vite项目的分步说明

• IntelliJ IDEA与Vite构建工具集成，改善了前端开发体验。Vite 由一个开发服务器和一个构建命令组成。构建服务器通过本机 ES 模块提供源文件。生成命令将代码与汇总捆绑在一起，汇总预配置为输出高度优化的静态资产以供生产。
• IntelliJ IDEA 支持 Vue 标签中的 tsconfig.json 和 jsconfig.json 路径映射，并识别 Vite 别名。style
• 在由具有不同 Vite 配置的多个模块组成的项目中，IntelliJ IDEA 可以自动检测每个模块的相关配置文件，并使用其中的模块解析规则，请参阅下面的指定要使用的 Vite 配置文件。

1.1、开始之前

1. 下载并安装 Node.js。

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

1.2、创建新的Vite应用程序

• 启动新 Vite 应用程序的推荐方法是 create-vite 包，IntelliJ IDEA 使用 npx 下载并为您运行。因此，您的开发环境已预先配置为使用 Vite 和其中一个流行框架的基本模板。
• 当然，您仍然可以自己下载或创建一个空的IntelliJ IDEA项目并在其中安装Vite。create-vite
• 从 Vite 官方网站了解有关开始使用 Vite 的更多信息.js。

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

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

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

3. 在右侧窗格中：

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

• 在“节点解释器”字段中，指定要使用的节点.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 调试配置，其中包含用于运行或调试应用程序的默认设置。