使用IDEA创建Vue3通过Vite实现工程化 | 您所在的位置:网站首页 › idea创建窗口无法实现 › 使用IDEA创建Vue3通过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 准备工作下载并安装 Node.js。 确保在 “设置”|”“插件”页面,“已安装”选项卡。有关更多信息,请参阅管理插件。 创建新的 Vite 应用程序启动新 Vite 应用程序的推荐方法是 create-vite 包,IntelliJ IDEA 使用 npx 下载并运行该包。因此,您的开发环境已预先配置为使用 Vite 和流行框架之一的基本模板。 当然,你仍然可以自己下载或创建一个空的 IntelliJ IDEA 项目并在其中安装 Vite。create-vite 从 Vite.js 官方网站了解有关从 Vite 开始的更多信息。 使用 create-vite 生成 Vite 应用程序选择“文件”|”新品 |项目,或单击“欢迎”屏幕上的“新建项目”按钮。 在“新建项目”对话框中,选择左侧窗格中的“Vite”。 在右侧窗格中: 指定项目名称和要在其中创建项目的文件夹。 在“节点解释器”字段中,指定要使用的 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 配置文件。 单击“创建”时,IntelliJ IDEA 会生成一个特定于 Vite 的项目,其中包含所有必需的配置文件,并下载所需的依赖项。IntelliJ IDEA 还使用默认设置创建 npm start 和 JavaScript 调试配置,用于运行或调试应用程序。 或者,打开内置终端并键入: npx create-vite 以创建应用程序。 cd 切换到应用程序文件夹。 npm start启动 Node.js 服务器。 在空的 IntelliJ IDEA 项目中安装 Vite在这种情况下,必须自行配置生成管道。从 Vite 官方网站了解有关将 Vite 添加到项目的更多信息。 创建一个空的 IntelliJ IDEA 项目选择“文件”|”新品 |项目,或单击“欢迎”屏幕上的“新建项目”按钮。 在“新建项目”对话框中,选择左侧窗格中的“新建项目”。 在右侧窗格中,选择“语言”区域中的“JavaScript”。 为新项目命名并根据需要更改其位置,然后单击“创建”。 在空项目中安装 Vite打开将使用 Vite 的空项目。 在嵌入式终端中 (AltF12) , 类型: npm install --save-dev vite 从现有的 Vite 应用程序开始要继续开发现有的 Vite 应用程序,请在 IntelliJ IDEA 中打开它并下载所需的依赖项。 打开计算机上已有的应用程序源单击“欢迎”屏幕上的“打开”或“导入”,或选择“文件”|”从主菜单打开。在打开的对话框中,选择存储源的文件夹。 从版本控制中签出应用程序源单击欢迎屏幕上的“从 VCS 获取”。 或者,选择“文件”|”新品 |来自版本控制或 Git 的项目 |克隆。。。从主菜单。 您可能会看到与您的项目关联的任何其他版本控制系统,而不是主菜单中的 Git。例如,Mercurial 或 Perforce。 在打开的对话框中,从列表中选择版本控制系统,并指定要从中签出应用程序源的存储库。有关详细信息,请参阅签出项目(克隆)。 下载依赖项确保您的 package.json 在 或 下列出了包。这是必要的,因为 IntelliJ IDEA 与 Vite 的集成,尤其是自动检测配置文件,要求将软件包安装在您的项目中或全局安装。vitedependenciesdevDependenciesvite 在弹出窗口中单击“运行”npm install“或”运行“yarn install”: 可以使用 npm、Yarn 1 或 Yarn 2,详见 npm 和 Yarn。 在编辑器或“项目”工具窗口中,从 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 基于对 Vite 配置文件的分析,IntelliJ IDEA 可以理解 Vite 配置,解析模块,并在 JavaScript 和 TypeScript 文件中提供编码帮助。 在 IntelliJ IDEA 中,您可以在两种配置模式之间进行选择——自动和手动。 通过自动配置,IntelliJ IDEA 会自动检测每个 JavaScript 或 TypeScript 文件的相关 Vite 配置文件。 通过手动配置,您可以指定要在项目中使用的 Vite 配置文件。如果 IntelliJ IDEA 无法识别 Vite 配置文件的名称,手动配置很有用,请参阅下面的已识别 Vite 配置名称列表。 选择如何检测 Vite 配置打开“设置”对话框 (CtrlAlt0S),然后转到“语言和框架”|”JavaScript的 |维特。 在“检测模块解析的 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 配置文件名称列表。 |
CopyRight 2018-2019 实验室设备网 版权所有 |