第一个Electron应用-CSDN博客

本文链接：https://blog.csdn.net/yangshuoSB/article/details/132422840

文章目录

准备工作
一、安装Electron
二、初始化npm项目
三、创建main.js
四、运行
五、添加index.html文件
六、修改main.js文件
七、运行
八、mian.js修改后，程序自动刷新
九、程序打包发布

准备工作

安装Node.js的LTS版本
要检查 Node.js 是否正确安装，请在您的终端输入以下命令，查看安装版本：

node -v
npm -v

一、安装Electron

在命令行模式下进入创建应用的文件夹，然后输入下面的安装命令。

npm install electron --save-dev

命令执行完后，文件夹中包含如下内容。

二、初始化npm项目

Electron 应用基于 npm 搭建，以 package.json 文件作为入口点。

npm init

执行完如上命令后，package.json文件会被修改。可以全部按照默认选项设置，结束后再修改package.json内容。
修改后package.json文件内容

//package.json
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",	//重点，用于打包软件
  "main": "main.js",		//重点，程序入口
  "scripts": {
  	"start": "electron .",	//重点，start命令用于开发模式下启动应用
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",		//重点，用于打包软件
  "license": "MIT",			
  "devDependencies": {
    "electron": "23.1.3"
  }
}

三、创建main.js

创建main.js，并写入以下内容：

console.log('welcome Electron')

四、运行

命令行运行如下命令

npm start
或
npm run start

运行结果如下：
在这里插入图片描述

到目前为止Electron应用就跑起来了，接下来，我们试一下显示页面。

五、添加index.html文件

新建index.html文件，并添加如下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
  </body>
</html>

六、修改main.js文件

main.js修改为如下内容：

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

七、运行

命令行运行如下命令

npm start
或
npm run start

运行结果如下：
在这里插入图片描述

八、mian.js修改后，程序自动刷新

修改package.json中的scripts代码,如下：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --watch main.js --exec npm run build",
    "build": "electron ."
  },

npm start运行，这样每次修改main.js后，程序都自动重新编译。
如果提示nodemon不是内部或外部命令，则nodemon没有安装，安装命令如下：

npm install nodemon –g

九、程序打包发布

基于上面第七个步骤
package.json中的"author"和"description"不能为空
将electron forge添加到应用的开发依赖中。

 npm install --save-dev @electron-forge/cli

并使用import命令设置forge

 npx electron-forge import

执行完上一个命令后，package.json会变成如下：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron-forge start", //改变了
    "package": "electron-forge package", //改变了
    "make": "electron-forge make" //改变了
  },