HoRain云小助手个人主页 个人专栏: 《Linux 系列教程》《c语言教程》⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。专栏介绍专栏名称专栏介绍《C语言》本专栏主要撰写C干货内容和编程技巧让大家从底层了解C把更多的知识由抽象到简单通俗易懂。《网络协议》本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘一起解密网络协议在运行中协议的基本运行机制《docker容器精解篇》全面深入解析 docker 容器从基础到进阶涵盖原理、操作、实践案例助您精通 docker。《linux系列》本专栏主要撰写Linux干货内容从基础到进阶知识由抽象到简单通俗易懂帮你从新手小白到扫地僧。《python 系列》本专栏着重撰写Python相关的干货内容与编程技巧助力大家从底层去认识Python将更多复杂的知识由抽象转化为简单易懂的内容。《试题库》本专栏主要是发布一些考试和练习题库涵盖软考、HCIE、HRCE、CCNA等目录⛳️ 推荐专栏介绍1、Node.js2、npm 或 yarn安装 Electron1、项目内安装验证是否安装成功实例实例常见安装问题及解决办法使用国内镜像加速安装可选工具在安装 Electron 之前需要准备两个基础环境1、Node.jsElectron 是基于 Node.js 的框架因此必须先安装 Node.js。检查是否已安装node -v npm -v如果输出版本号说明已安装。若没有请前往 Node.js 官网 下载LTS长期支持版。安装完成后系统会自动附带 npmNode 包管理器。如果不熟悉 Node.js可以参考 Node.js教程。2、npm 或 yarnElectron 的安装依赖 npm 或 yarn 管理包。可以选择# 使用 npm npm install electron --save-dev # 或使用 yarn yarn add electron --dev安装 ElectronElectron 的安装方式有两种全局安装和项目内安装。推荐使用项目内安装更安全、更易维护。1、项目内安装# 创建一个项目文件夹 mkdir my-electron-app cd my-electron-app # 初始化 Node 项目 npm init -y # 安装 Electron npm install electron --save-dev安装成功后会在项目目录中出现node_modules/ package.json package-lock.json验证是否安装成功创建一个简单的 Electron 启动文件main.js实例const { app, BrowserWindow } require(electron) function createWindow() { const win new BrowserWindow({ width: 800, height: 600, }) win.loadFile(index.html) } app.whenReady().then(() { createWindow() }) index.html 实例 !DOCTYPE html !DOCTYPE html html head meta charsetutf-8 title菜鸟教程(runoob.com)/title /head body h1Hello, Electron!/h1 pRUNOOB Electron 测试。/p /body /html然后在 package.json 里添加启动命令scripts: { start: electron . }运行npm start如果弹出一个桌面窗口里面写着 Hello, Electron! 说明安装成功/p常见安装问题及解决办法问题原因解决办法npm ERR! code ELIFECYCLE权限或缓存问题尝试执行npm cache clean --forceelectron failed to install correctly网络或下载源超时使用淘宝镜像安装如下使用国内镜像加速安装Electron 下载包很大几十 MB国内可能超时可以用淘宝镜像# 临时设置 ELECTRON_MIRRORhttps://npmmirror.com/mirrors/electron/ npm install electron --save-dev 或永久修改 npm 源 npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/可选工具工具名作用安装命令electron-builder打包成安装程序.exe / .dmg 等npm install electron-builder --save-develectron-reload修改代码后自动重载npm install electron-reload --save-develectron-forge快速构建模板npx create-electron-app my-app❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧
HoRain云--Electron 安装
发布时间：2026/5/26 10:51:51
HoRain云小助手个人主页 个人专栏: 《Linux 系列教程》《c语言教程》⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。专栏介绍专栏名称专栏介绍《C语言》本专栏主要撰写C干货内容和编程技巧让大家从底层了解C把更多的知识由抽象到简单通俗易懂。《网络协议》本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘一起解密网络协议在运行中协议的基本运行机制《docker容器精解篇》全面深入解析 docker 容器从基础到进阶涵盖原理、操作、实践案例助您精通 docker。《linux系列》本专栏主要撰写Linux干货内容从基础到进阶知识由抽象到简单通俗易懂帮你从新手小白到扫地僧。《python 系列》本专栏着重撰写Python相关的干货内容与编程技巧助力大家从底层去认识Python将更多复杂的知识由抽象转化为简单易懂的内容。《试题库》本专栏主要是发布一些考试和练习题库涵盖软考、HCIE、HRCE、CCNA等目录⛳️ 推荐专栏介绍1、Node.js2、npm 或 yarn安装 Electron1、项目内安装验证是否安装成功实例实例常见安装问题及解决办法使用国内镜像加速安装可选工具在安装 Electron 之前需要准备两个基础环境1、Node.jsElectron 是基于 Node.js 的框架因此必须先安装 Node.js。检查是否已安装node -v npm -v如果输出版本号说明已安装。若没有请前往 Node.js 官网 下载LTS长期支持版。安装完成后系统会自动附带 npmNode 包管理器。如果不熟悉 Node.js可以参考 Node.js教程。2、npm 或 yarnElectron 的安装依赖 npm 或 yarn 管理包。可以选择# 使用 npm npm install electron --save-dev # 或使用 yarn yarn add electron --dev安装 ElectronElectron 的安装方式有两种全局安装和项目内安装。推荐使用项目内安装更安全、更易维护。1、项目内安装# 创建一个项目文件夹 mkdir my-electron-app cd my-electron-app # 初始化 Node 项目 npm init -y # 安装 Electron npm install electron --save-dev安装成功后会在项目目录中出现node_modules/ package.json package-lock.json验证是否安装成功创建一个简单的 Electron 启动文件main.js实例const { app, BrowserWindow } require(electron) function createWindow() { const win new BrowserWindow({ width: 800, height: 600, }) win.loadFile(index.html) } app.whenReady().then(() { createWindow() }) index.html 实例 !DOCTYPE html !DOCTYPE html html head meta charsetutf-8 title菜鸟教程(runoob.com)/title /head body h1Hello, Electron!/h1 pRUNOOB Electron 测试。/p /body /html然后在 package.json 里添加启动命令scripts: { start: electron . }运行npm start如果弹出一个桌面窗口里面写着 Hello, Electron! 说明安装成功/p常见安装问题及解决办法问题原因解决办法npm ERR! code ELIFECYCLE权限或缓存问题尝试执行npm cache clean --forceelectron failed to install correctly网络或下载源超时使用淘宝镜像安装如下使用国内镜像加速安装Electron 下载包很大几十 MB国内可能超时可以用淘宝镜像# 临时设置 ELECTRON_MIRRORhttps://npmmirror.com/mirrors/electron/ npm install electron --save-dev 或永久修改 npm 源 npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/可选工具工具名作用安装命令electron-builder打包成安装程序.exe / .dmg 等npm install electron-builder --save-develectron-reload修改代码后自动重载npm install electron-reload --save-develectron-forge快速构建模板npx create-electron-app my-app❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧
