Electron环境搭建(一)

最新推荐文章于 2025-06-18 18:12:52 发布
原创 最新推荐文章于 2025-06-18 18:12:52 发布 · 3.1k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍如何使用HTML、CSS和JavaScript构建跨平台桌面应用。通过Electron环境搭建步骤，包括node.js安装、配置cnpm、安装Electron及环境测试，帮助初学者快速上手。

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

Electron环境搭建

Electron简介

  • 要使用Electron 务必先熟悉使用 HTML、CSS、JavaScript。
  • Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建可运行在Windows、macOS、Linux系统之上的跨平台的桌面应用的开源库。
  • Electron官方:后续开发可直接参考官方文档。

Electron环境搭建

刚入坑的小伙伴需要按照步骤来，避免掉坑。

1、node.js 安装

2、配置cnpm

因为node.js中npm命令是直接到国外下载， 则速度会特别慢，配置成cnpm后速度会大大提升。
  • 淘宝镜像官方文档。
  • 打开终端: windows下直接 win + r输入cmd并确定。
    在这里插入图片描述
  • 输入npm -v此时若安装好nodejs后则会出现对应的版本信息。
    在这里插入图片描述
  • 输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 稍等片刻后输入cnpm -v可查看对应的版本信息，此时已经安装成功。

3、安装Electron

  • 在终端中输入cnpm install -g electron 全局安装。

4、环境测试

  • 在终端中输入electron 弹出窗口则证明安装成功。
    在这里插入图片描述在这里插入图片描述
Electron——配置Electron开发环境
face_ice的专栏
12-22 1322
这里我们以Electron为主题，React为View层去构建应用，观看文章需要具备一定的React相关技能。全文构建基于，建议每个人都把node升级到8.0.0以上，可以做到统一，避免因版本不同出现的问题。提示：以下是本篇文章正文内容这一节主要示例创建一个简单的项目，成功启动。下一节从概念入手讲解进程和线程相关内容。
vscode+Electron环境搭建 helloword
chduguxue的专栏
10-17 4247
一个基于Chrome+Nodejs的容器，可以用纯前端的方式实现跨平台的桌面应用开发。代码由js，css，html构成，它支持把整个项目编译成exe。由于它支持Nodejs，所以可以引用dll，那么技术上涉及到跟硬件打交道的事情可以用c#，c++来开发，做成dll再有Nodejs去调用。所以我们可以把electron当作一个快速开发业务逻辑和界面逻辑的手段。底层核心可以用c++做，大大提高了开发效率。
Electron环境搭建
irokay的专栏
07-07 2819
一、安装Node.js 大部分开发者是使用Node.js来创建Electron项目的，所以需要安装Node.js（https://nodejs.org/）. 二、yarn依赖包管理工具安装 建议使用yarn作为依赖包管理工具，它相对于npm包管理工具来说，速度更快、操作简洁，安装命令： npm install -g yarn 三、创建第一个应用项目 首先创建一个目录，比如我新建了一个Demo1目录，“D:\projects\electronApps\Demo1” 1、命令行进入此目录，执行如
electron开发环境搭建
weixin_34161064的博客
03-07 262
开发环境 Node.js Vscode vscode安装Debugger for Chrome 创建开发目录（也是解决方案） 执行初始化命令，创建electronpicture工程，并添加main.js和index.html文件 npm init 安装electron npm install electron -dev 如果安装失败，则可能需要将参数unsafe-perm设...
Electron（01）入门与实战：从环境搭建到打包发布
最新发布
m0_56799642的博客
06-18 498
render.js 渲染进程(页面引入)，render.js可以调用alert(),是属于浏览器环境 渲染器进程(简称渲染器) 负责展示图形内容。main.js主进程（运行在node环境） 主进程，负责应用的生命周期、展示原生窗口、执行特殊操作和管理渲染进程。预加载脚本preload.js（中间人），它在渲染进程运行（浏览器环境），人家也能访问一部分的node api。如何让你的预加载脚本执行 在main.js 引入预加载脚本，让主进程认识一下预加载脚本。预加载ipc.send 对应主进程 ipc.on。
Electron 环境搭建
specialsun的专栏
03-28 1262
Electron是跨平台的GUI开发工具，除了swing、QT，开发跨平台UI又多了一个选择。比较著名的vscode，就是通过electron开发的。 Electron 是基于谷歌的Chomium 核心，通过javascript、html、css来开发GUI。本质上是运行一个浏览器，的确很新颖。 一. npm 使用 npm init -y test 生成项目package.json n...
electron环境搭建
qingtian305的专栏
09-09 278
环境搭建 electron环境搭建 下载安装node.js，下载LTS长期支持版本 管理员方式打开命令行cmd 在项目路径下执行npm -v和node -v出现版本信息，表示node.js环境安装完成 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装electron 我这里安装的14.0.0版本 cnpm install...
【Electron学习笔记（一）】Electron基本介绍和环境搭建
禾戊之昂的博客
11-25 1583
本文将深入浅出地介绍 Electron 的基本概念、核心原理以及如何进行环境搭建，帮助读者快速上手 Electron 开发。我们将从安装 Node.js 和 npm（Node 包管理器）开始，逐步指导读者完成 Electron 的全局安装，并创建一个简单的 Electron 应用项目。通过实例演示，读者将能够直观感受到 Electron 开发的乐趣和高效。
Electron实战(一)：环境搭建/Hello World/打包exe
编程架构三分天下：分层、分治、分时序。
02-04 2093
Electron整合Chromium浏览器（跨平台界面容器）和Node.js（跨平台系统能力），实现了一个使用JavaScript的全栈开发环境，逐渐成为开发跨平台桌面应用程序的有力竞争者。–-save-dev/-d/-D 本地安装，安装版本写入package.json的devDependencies。–-save/-s/-S 本地安装，安装版本写入package.json的dependencies。（g代表global全局安装的意思）安装语句时，会将安装的模块安装到。无奈，遇到版本不兼容了！
[electron] electron环境搭建
qq_47500842的博客
02-24 1360
electron入门环境搭建
electron 环境搭建
yhwcool的博客
12-27 400
node.js环境不多说， electron 环境 npm install electron -g 全局安装 ++++++++++++++++++++   建议 降版本  2-3版本之间； 手动搭建 1. 项目包  （文件夹） electrondemo 2.index.html,main.js 3.npm init 加载package.json文件 4.main.js 见下图 ...
搭建electron环境
zxl_start的博客
09-26 384
electron环境
Electron:环境搭建
tang0_0
01-05 342
Electron:环境搭建 1.安装Node.js 进入官网下载、安装。 tips:下载很慢 2.安装cnpm npm是nodejs内置的软件包管理器。因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以淘宝团队在国内服务器上建了个镜像,就是cnpm。 安装步骤： cmd终端下输入如下命令： npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装Electron cmd终端下输入如下命令： cnpm inst
Electron开发环境搭建
applek_Case的博客
01-16 1179
Electron可以用于windows，mac以及linux桌面软件开发，可谓非常棒了，移动端有react，桌面端有Electron，这就很棒。 下面说说如何搭建环境 Electron是基于nodejs和Web开发的，所以需要安装nodejs和一个web开发工具 访问：https://nodejs.org/en/ 下载稳定版本   下载后安装，然后在cmd里面使用npm安装Elec...
搭建electron开发环境
零丁若叹
01-29 2587
搭建electron开发环境
Electron环境配置
01-07
### Electron 开发环境配置教程 #### 3.1 准备工作 为了开始 Electron 的开发之旅，确保计算机上已安装 Node.js 和 npm。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，npm 则是随同 Node.js 自动安装的包管理工具。 #### 3.2 创建项目结构 创建一个新的工作目录用于存放应用程序文件[^4]: ```bash mkdir my-electron-app cd my-electron-app ``` #### 3.3 初始化项目 通过 `npm init` 命令初始化新的 Node.js 应用程序，默认设置可以通过 `-y` 参数跳过交互过程: ```bash npm init -y ``` 这一步会自动生成一份默认的 `package.json` 文件，在其中定义了项目的元数据以及依赖关系。 #### 3.4 安装 Electron 接着安装 Electron 作为开发依赖项并保存到 `package.json` 中: ```bash npm install electron --save-dev ``` 此时，`package.json` 将更新以包含 Electron 版本信息和其他必要的脚本字段[^2]: ```json { "name": "my-electron-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "electron ." }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "electron": "^30.1.0" } } ``` #### 3.5 编写主进程代码 在根目录下新增名为 `main.js` 的入口文件，这是应用启动时执行的第一个JavaScript文件: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) ``` #### 3.6 添加HTML页面 在同一级别位置添加简单的 HTML 页面供渲染器加载： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First Electron App</title> </head> <body> <h1>Hello from Electron!</h1> </body> </html> ``` 完成上述步骤之后，就可以运行命令 `npm start` 启动应用程序实例，查看效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值