通过electron-vite创建项目

参考electron-vite官网：https://cn.electron-vite.org/guide/

要求：

1、安装了nodejs和npm,

electron-vite 需要 Node.js 版本 20.19+, 22.12+ 和 Vite 版本 5.0+

2、克隆模板项目：

npx degit alex8088/electron-vite-boilerplate electron-app

cd electron-app

npm install

npm run dev

克隆的项目是直接初始化好的vscode、electron-vite项目，可以直接通过vscode打开运行调试，或通过npm命令运行调试。

调试运行前需要执行初始化安装node_modules相关模块，命令：npm install

download

可以通过配置文件看到是一个electron-vite-vue3项目。

Vscode运行调试electron-vite项目：

1、选择debug all,然后直接点击前边的三角箭头运行即可。

2、通过launch.json文件可以看到运行时执行的是electron-vite或electron-vite.cmd

"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/ electron-vite ",

"windows": {

"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"

文件位于项目的node_modules/.bin目录下

///////////////////////////////////////////////////////////////////////////////////////////

使用idea运行调试electron项目

通过配置文件package.json可以看到

可以直接运行："dev": "electron-vite dev"

构建："build": "npm run typecheck && electron-vite build",
"postinstall": "electron-builder install-app-deps",
"build:unpack": "npm run build && electron-builder --dir",
构建windows程序："build:win": "npm run build && electron-builder --win",
构建mac程序："build:mac": "npm run build && electron-builder --mac",
构建linux程序："build:linux": "npm run build && electron-builder --linux"

需要在不同操作系统才能构建对应系统下的应用程序。

文件electron、electron.cmd、electron-vite、electron-vite.cmd、electron-builder、electron-builder.cmd位于项目的node_modules/.bin目录下

正确执行，也可以在浏览器中浏览：http://localhost:5173/

也可通过附加的命令行选项直接指定项目名称和你想要使用的模板，

////////////////////////////////////////////////////////////

如果通过electron官网介绍的npm初始化项目：这种方法很少使用，应该使用更先进的工具electron-vite方法创建项目

electron官网：https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-first-app

初始化 npm 项目

Electron 应用基于 npm 搭建，以 package.json 文件作为入口点。首先创建一个文件夹，然后在其中执行 npm init 初始化项目。

mkdir my-electron-app && cd my-electron-app
npm init

这条命令会帮您配置 package.json 中的一些字段。为本教程的目的，有几条规则需要遵循：

入口点 应当是 main.js (您很快就会创建它)
author、license 和 description 可以是任何值，但在稍后的packaging中是必需的。

安装electron : npm install electron --save-dev

在初始化并且安装完 Electron 之后，您的 package.json 应该长下面这样。文件夹中会出现一个 node_modules 文件夹，其中包含了 Electron 可执行文件；还有一个 package-lock.json 文件，指定了各个依赖的确切版本。

package.json

{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jane Doe",
"license": "MIT",
"devDependencies": {
"electron": "23.1.3"
}
}

因为 Electron 的主进程就是一个 Node.js 运行时，所以你可以直接用 electron 命令运行任意的 Node.js 代码（甚至还能把它当成 REPL 来用）。要执行这个脚本，需要在 package.json 的 scripts 字段中添加一个 start 命令，内容为 electron . 。这个命令会告诉 Electron 在当前目录下寻找主脚本，并以开发模式运行它。

package.json

{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jane Doe",
"license": "MIT",
"devDependencies": {
    "electron": "23.1.3"
}
}

运行程序：npm run start

如果在idea中远行需要配置idea:其中可执行程序electron及electron.cmd存在于你的项目目录中的node_modules/.bin 目录下。

1、electron使用的是ES6语法，需要在设置中修改语法

找到设置菜单，选择language & Frameworks

修改JavaScript的版本