Electron 初学

最新推荐文章于 2025-06-13 11:34:10 发布

mmuhua

最新推荐文章于 2025-06-13 11:34:10 发布

阅读量717

点赞数 1

CC 4.0 BY-SA版权

文章标签： electron 安装

本文链接：https://blog.youkuaiyun.com/mmuhua/article/details/80309779

本文档详细介绍了如何开始使用Electron进行桌面应用开发。首先，讲解了如何安装Node.js和Electron，包括使用淘宝镜像加速下载。接着，描述了检查安装成功的方法。然后，指导读者如何运行Electron示例程序。最后，概述了创建一个简单的'Hello World'程序的步骤，包括创建文件夹、编写package.json、main.js和index.html，并演示了如何启动项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.安装

1.安装nodejs

由于electron是基于nodejs的，所以我们首先要安装nodejs

官网地址:https://nodejs.org/en/

直接下载安装即可;看安装是否成功命令:node -v,npm -v ;出现版本号即表示安装成功

2.安装electron

2.1由于直接访问国外服务器缓慢,我选择先安装淘宝镜像的包命令行管理工具cnpm

命令:npm install cnpm -g --registry=http://registry.npm.taobao.org

2.2再安装electron

命令:cnpm install electron -g

2.3校验是否安装成功

命令:electron -v ;出现版本号表示安装成功

3.安装目录下找到下载好的electron文件

3.1复制在任意位置,解压;

3.2双击electron.exe

红色框意思就是要运行程序就在cmd窗口中输入命令 : electtron.exe path-to-app(app路径)

二.编辑入门程序Hello Word

1.创建文件夹 electron//文件名随意 ; 里面创建三个文件 package.json，main.js，index.html

2.编写package.json

  {
      "name"    : "hello Word",
      "version" : "0.1.0",
      "main"    : "main.js"

    }

3.编写main.js

const electron = require('electron');
// Module to control application life.
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;

let win;

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  win.loadURL(`file://${__dirname}/index.html`);//注意
  win.webContents.openDevTools();

  win.on('closed', () => {
    win = null;
  });
}
app.on('ready', createWindow);

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

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

4.编写index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

5.启动项目:

在electron-v2.0.0-win32-x64 解压包里面

在此处运行输入命令: electron.exe C:\Users\muhua\Desktop\electron //electron.exe 运行文件路径

app.commandLine.appendSwitch("--disable-http-cache");//禁止使用缓存,这是我在项目中需要增加的;