1 安装Node.js

在node.js官网：https://nodejs.org/en下载目前稳定版本的node.js安装包，本文下载的是node-v20.10.0-x64.msi，直接点击安装。

安装完成之后，在命令工具输入以下命令：

node -v
npm -v
Electron – 开发环境搭建-StubbornHuang Blog

如能正确返回node和npm的版本说明node.js安装完成。

npm安装完成之后，为了方便使用npm，最后是设置npm的代理，可以通过以下命令设置

npm config set proxt http://www.xxx.com:port

设置完成之后可以通过以下命令查看代理设置

npm config list

或者直接设置源为淘宝源

npm config set registry https://registry.npm.taobao.org

2 安装CNPM

对于没有代理和魔法手段上网的，可以通过CNPM安装Electron，首先通过淘宝镜像源安装CNPM

npm install -g cnpm --registry=https://registry.npm.taobao.org

通过以下命令检测CNPM是否安装成功

cnpm -v

3 安装Electron

方案1（官方推荐）

npm install -g electron

方案2（非魔法用户）

cnpm install -g electron

通过以下命令检测electron安装是否成功

electron --version

如正确输出版本信息，则说明安装成功。

或者输入

electron

如出现以下画面这说明安装成功。

Electron – 开发环境搭建-StubbornHuang Blog

4 创建简单的electron demo

新建一个electron_test文件夹，在命令行工具中切换到electron_test文件夹中，在命令行工具中使用

npm init -y

新建一个前端工程，这时会在该文件夹下生成一个package.json文件，

之后执行以下命令：

npm install --save-dev electron

然后修改package.json文件内容，在scripts中增加以下行

"start":"electron ."

修改完成之后package.json文件内容为

{
  "name": "electron_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start":"electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然后在该目录下新建一个index.js文件，增加以下内容

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

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

  win.loadFile('index.html')
}

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

然后在该目录下新建一个index.html文件，在文件中增加以下内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello, electron!
</body>
</html>

然后在命令行中输入

npm run start

如果一切正确则会弹出简单的electron窗口，如下图所示

Electron – 开发环境搭建-StubbornHuang Blog

到此整个开发环境就搭建完成了。

参考