快速入门

Electron 官方教程-快速入门，这里有更为详细的教程。

安装

提示

安装 Electron 之前，请确保你已经安装了 Node.js 和 npm，可以使用下面的命令检查 Node.js 和 npm 是否安装成功。

node -v
npm -v

1. 创建一个文件夹并初始化

npm

mkdir electron-app && cd electron-app
npm init -y

yarn

mkdir electron-app && cd electron-app
yarn init -y

2. 安装 Electron

npm

npm install -D electron

yarn

yarn add --dev electron

注意

如果使用 npm 安装 Electron 总是失败，可以尝试使用中国的镜像进行安装。

1. 先全局安装 cnpm，并设置中国镜像源

npm install -g cnpm --registry=https://registry.npmmirror.com

2. 使用 cnpm 安装 Electron

cnpm install electron -D

第一个程序

在编写程序之前，需要先修改 package.json 文件

1. 将 main 字段指向 main.js 文件，并在根目录下创建 main.js 文件
2. 在 scripts 字段下增加一条 start 命令

    {
      "scripts": {
        "start": "electron ."
      }
    }
   

下面的 main.js 文件内容，实现创建一个内容为 https://dreamruins.com 的窗口的功能。

// 引入 electron 模块
const { app, BrowserWindow } = require("electron");

/**
 * 创建窗口
 */
function createWindow() {
  // 创建一个宽度为 800px，高度为 600px 的窗口
  const window = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // 窗口加载 https://dreamruins.com 作为内容
  window.loadURL("https://dreamruins.com");
  // 如果需要加载本地文件，可以使用 window.loadFile() 方法
  // window.loadFile('index.html')
}

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