搭建 Electron 的环境

准备工作

1. 电脑必须安装 Nodejs, 推荐安装最新稳定版本（https://nodejs.org/en/）
2. 电脑上面推荐安装 git

安装 Electron

npm install -g electron

克隆一个仓库、快速启动一个项目

# 克隆示例项目的仓库 
git clone https://github.com/electron/electron-quick-start 

# 进入这个仓库 
cd electron-quick-start 

# 安装依赖并运行 
npm install && npm start

electron-forge

• electron-forge 相当于 electron 的一个脚手架，可以让我们更方便的创建、运行、打包 electron 项目。

• Github 地址：https://github.com/electron-userland/electron-forge

• 官网地址：https://www.electronforge.io/

• 如果你电脑上面安装了最新版本的 nodejs 可以使用 npx 创建项目，如果你电脑上面安装了 yarn 也可以使用 yarn 创建项目。

npx create-electron-app lesson1
# 或者
yarn create-electron-app lesson1

运行项目

cd lesson1
npm start

也可以使用下面方法创建项目（老方法）

npm install -g @electron-forge/cli 
npm init electron-app@latest lesson1
# npm init electron-app@latest my-new-app -- --template=webpack
cd lesson1
npm start

手动搭建一个 electron 项目

1. 新建一个项目目录 例如： lesson1。
2. 在 lesson1 目录下面新建三个文件: index.html 、 main.js 、 package.json 。
3. index.html 里面用 css 进行布局（以前怎么写现在还是怎么写）。
4. 在 main.js 中写如下代码：

const { app, BrowserWindow } = require("electron") 
const path = require("path") 
const createWindow = () => { 
  const mainWindow = new BrowserWindow({width: 800, height: 600, }); 
  mainWindow.loadFile(path.join(__dirname, 'index.html'));
  // mainWindow.loadURL('https://github.com'); 
}

//监听 electron ready 事件创建窗口 
app.on('ready', createWindow); 

//监听窗口关闭的事件，关闭的时候退出应用，macOs 需要排除 
app.on('window-all-closed', () => { 
  if (process.platform !== 'darwin') { 
    app.quit();
  } 
});

//Macos 中点击 dock 中的应用图标的时候重新创建窗口 
app.on('activate', () => { 
  if (BrowserWindow.getAllWindows().length === 0) { 
    createWindow(); 
  } 
});

运行

# 注意：命令后面有个点
electron . 

配置

preload.js

// See the Electron documentation for details on how to use preload scripts:
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts

window.addEventListener("DOMContentLoaded", () => {
  const replaceText = (selector, text) => {
    const ele = document.getElementById(selector)
    if (ele) ele.innerText = text
  }

  for (const type of ["chrome", "node", "electron"]) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

目录