问题反馈可发送邮件到stubbornhuang@qq.com
本站由于前段时间遭受到大量临时和国外邮箱注册，所以对可注册的邮箱类型进行了限制！
本站会放置Google广告用于维持域名以及网站服务器费用。
欢迎大家交换友链，可在https://www.stubbornhuang.com/申请友情链接进行友链交换申请！
工资「喂饱肚子」，副业「养活灵魂」！
感谢大家访问本站，希望本站的内容可以帮助到大家！
在本站开通年度VIP，无限制下载本站资源和阅读本站文章
如果觉得本站的内容有帮助，可以考虑打赏博主哦！
计算机图形学与计算几何经典必备书单整理，下载链接可参考：https://www.stubbornhuang.com/1256/

当前位置：首页 › 编程技术 › GUI界面编程 › Electron › 正文

Electron – 开发环境搭建

StubbornHuang Electron 发布于2023-12-12 阅读 1,385次 0次评论 0次点赞本文共1862个字，阅读需要5分钟。

1 安装Node.js

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

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

node -v
npm -v

如能正确返回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

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

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>

然后在命令行中输入