快速搭建一个简单的 Electron 学习环境，为接下来的 Electron 相关知识点的学习做准备。

源码：

my-electron-app.zip

目标：

  1. 认识 Electron 应用的最小组成
  2. 能够从 0 到 1 快速搭建一个简单的 Electron 学习环境（Electron 应用的最小组成）

详细步骤说明

要初始化 Electron 学习环境，需要先安装 Node.js 和 npm。接着，可以按照以下步骤初始化 Electron 学习环境：

  1. 创建一个新的空目录，例如 my-electron-app
  2. 进入该目录，执行 npm init -y 命令来初始化 npm，这将创建一个默认的 package.json 文件

  3. 安装 Electron 依赖：npm i electron

    1. {
    2. "name": "my-electron-app",
    3. "version": "1.0.0",
    4. "description": "",
    5. "main": "index.js",
    6. "scripts": {
    7. "test": "echo \"Error: no test specified\" && exit 1"
    8. },
    9. "keywords": [],
    10. "author": "",
    11. "license": "ISC",
    12. "dependencies": {
    13. "electron": "^24.3.0"
    14. }
    15. }

  4. 创建一个新的 JavaScript 文件，例如 index.js，并在其中编写 Electron 应用程序的主进程代码 ```javascript const { app, BrowserWindow } = require(‘electron’)

function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow()

// 加载应用的 index.html win.loadFile(‘index.html’) }

// 当 Electron 完成初始化并准备好创建浏览器窗口时调用此方法 app.whenReady().then(() => { createWindow() })

  2. 5. 创建一个新的 HTML 文件，例如 `index.html`，并在其中编写应用程序的界面代码
  3. ```html
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7.   <meta charset="UTF-8">
  8.   <title>1. initialize-electron-learning-environment</title>
  9. </head>
  10. <body>
  11.   <h1>Hello, World!</h1>
  12. </body>
  13. </html>
  1. 修改 package.json 文件，以指定应用程序的入口文件和打包命令。在 scripts 字段中添加以下内容：
    1. "main": "index.js",
    2. "scripts": {
    3. "dev": "electron ."
    4. }

"main": "index.js" 这将指定 index.js 文件为应用程序的入口文件

electron . 表示在当前目录下启动 Electron 应用。
其中 electron 是启动 Electron 应用的命令，后面的 . 表示当前目录，即将当前目录下的代码作为 Electron 应用的代码进行启动。在执行该命令前需要确保当前目录下存在 package.json 文件并且已经安装了 electron 依赖。

"dev": "electron ."
在执行 npm run dev 命令时启动 Electron 应用程序

  1. 运行应用程序：npm run dev，这将启动 Electron 应用程序，并在窗口中显示“Hello, World!”消息

image.png

认识 Electron 应用的最小组成

electron 学习环境搭建 - 图2