本次主要对创建Electron项目常用的3种方法进行介绍。
方法一：Git克隆
最简单的创建项目方法，通过Git Clone的方法创新一个简单的项目基础文件。仅支持用electron开始的命令行来运行项目。
方法二：Forge（脚手架）法
可支持创新、运行和打包的项目创建方法。通过electron forge工具来创建。
方法三：手工
最干净的项目创建方法。
一、Git克隆
- Git克隆项目
通过git克隆的方法建立一个项目。首先进入项目子目录，在目录里键入以下命令。
git clone https://github.com/electron/electron-quick-start
成功后会在当前目录下出现electron-quick-start目录，里面会有main.js, index.html等文件。
- 安装依赖包
package.json文件声明相关的依赖文件。
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^16.0.7"
}
}
安装依赖文件的方法，在package.json文件的目录里，键入npm i，会出现以下结果。
electron-quick-start % npm I
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
added 86 packages, and audited 87 packages in 11s
5 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
-
运行项目
在electron-quick-start目录入，键入npm start或者electron . 即可。
截屏2022-01-26 上午11.14.54.png 导入VSCode
现在我们开始用VSCode来修改这个项目。在VSCode用打开文件夹的方式导入这个项目。
二、Forge（脚手架）法
-
打开electron forge主页
https://github.com/electron-userland/electron-forge
截屏2022-01-26 上午11.37.11.png 开始安装
% npx create-electron-app my-new-app
Need to install the following packages:
create-electron-app
Ok to proceed? (y) y
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
✔ Initializing Project Directory
✔ Initializing Git Repository
✔ Locating custom template: "base"
✔ Copying Starter Files
✔ Initializing NPM Module
✔ Installing Template Dependencies
✔ Installing NPM Dependencies
安装成功，会以当前目录下创建my-new-app。里面有相关的项目文件。
-
导入VSCode的工具
通过VSCode打开文件夹导入my-new-app项目。
截屏2022-01-26 上午11.45.51.png
在VSCode终端输入npm start即可以启动。
my-new-app % npm start
> my-new-app@1.0.0 start
> electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies
✔ Launching Application
三、手工创建electron项目
- 新建目录
mkdir mydemo01
在VSCode里打开这个目录
-
创建第1个文件，index.html
截屏2022-01-26 上午11.58.33.png 创建第2个文件，main.js
暂时为空创建第3个文件，package.json
进入mydemo01目录，键入以下命令：
% npm init --yes
Wrote to /Users/Documents/SchoolMgntSys/mydemo01/package.json:
{
"name": "mydemo01",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
用VSCode打开效果如下：
- 开始写main.js文件内容
const { app, BrowserWindow } = require("electron");
const path = require("path");
//监听应用的启动事件
app.on("ready", () => {
const mainWindows = new BrowserWindow({
width: 600,
height: 400
});
mainWindows.loadFile(path.join(__dirname, "index.html"));
//mainWindows.loadURL("http://www.baidu.com");
})
- 运行
在VSCode终端里，输入
electron .
可以得到这个窗口。
-
新建CSS文件
新建CSS目录，新建base.css文件。如下图所示：
截屏2022-01-26 下午12.27.28.png
在index.html加入
<link rel="stylesheet" href="css/base.css">
再运行本程序，会发现文字变成了红色。
欢迎大家多提建议和意见。谢谢！
最后更新：2022年1月31日
