electron安装及快速创建
electron安装及快速创建
electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
详细内容见官网：https://www.electronjs.org/zh/docs/latest/。
今天来记录下练习中的安装过程和hello world的创建。
- 创建项目文件夹，并执行npm 初始化命令。
初始化过程中，会填写一些信息：entry point 应为 main.js，author 与 description 是打包是必填项。
npm init
- 将electron 依赖到项目中，由于官方地址出现网络问题，需要修改镜像地址。
创建文件.npmrc，并添加如下内容：
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
- 执行命令：
npm install electron --save-dev
- 确保package.json文件中有如下内容，用于后续启动项目：
{"scripts": {"start": "electron ."}
}
- 创建main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,contextIsolation:false}})// 加载 index.htmlmainWindow.loadFile('index.html')// 打开开发工具// mainWindow.webContents.openDevTools()
}// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', () => {// 在 macOS 系统内, 如果没有已开启的应用窗口// 点击托盘图标时通常会重新创建一个新窗口if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。
- 创建index.html
<!--index.html-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>Hello World!</title></head><body><h1>Hello World!</h1>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.<!--您也可以此进程中运行其他文件 --><script src="./renderer.js"></script></body>
</html>
- 创建preload.js
// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})
- 执行启动命令看效果
npm start
- 打包，以下命令逐行执行后，会产生out文件夹，里面是打包文件。
npm install --save-dev @electron-forge/clinpx electron-forge importnpm run make
- 再记录下关于报错【Uncaught ReferenceError: require is not defined】的解决方法：（1）先确定main.js里new BrowserWindow的webPreferences里是否包含nodeIntegration: true和contextIsolation:false，如下代码。（2）如果没有效果，再加上执行命令npm install -g browserify。
const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,contextIsolation:false}})
相关文章：
electron安装及快速创建
electron安装及快速创建 electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 详细内容见官网：https://www.electronjs.org/zh/docs/latest/。 今天来记录下练习中的安装过程和hello world的创建。 创建项目文件夹，并执行npm 初始化命…...
需要消化的知识点
需要消化 消灭清单 如何自定义一个Interceptor拦截器？ 后端开发可以用上的前端技巧 10个堪称神器的 Java 学习网站. 【前端胖头鱼】11 chrome高级调试技巧，学会效率直接提升666% 【前端胖头鱼】10个我经常逛的“小网站” 【前端劝退师lv-6】Chrome D…...
2024年7月25日（Git gitlab以及分支管理 ）
分布式版本控制系统 一、Git概述 Git 是一种分布式版本控制系统,用于跟踪和管理代码的变更。它是由Linus Torvalds创建的,最 初被设计用于Linux内核的开发。Git允许开发人员跟踪和管理代码的版本,并且可以在不同的开 发人员之间进行协作。 Github 用的就是Git系统来管理它们的…...
pdf格式过大怎么样变小 pdf文件过大如何缩小上传 超实用的简单方法
面对体积庞大的 PDF 文件，我们常常需要寻找有效的方法来缩减其大小。这不仅能够优化存储空间，还能提升文件的传输和打开速度。PDF文件以其稳定性和跨平台兼容性成为工作和学习中的重要文件格式。然而，当我们需要通过邮件发送或上传大文件时&a…...
前端文件下载word乱码问题
记录一次word下载乱码问题： 用的请求是axios库，然后用Blob去接收二进制文件 思路：现在的解决办法有以下几种，看看是对应哪种，可以尝试解决 1.将响应类型设为blob，这也是最重要的，如果没有解决…...
repo中的default.xml文件project name为什么一样？
文章目录 default.xml文件介绍为什么 name 是一样的，path 不一样？总结 default.xml文件介绍 在 repo 工具的 default.xml 文件中，定义了多个 project 元素，每个元素都代表一个 Git 仓库。 XML 定义了多个不同的 project 元素&…...
＜section id=“nice“ data-tool=“mdnice编辑器“ data-webs
大模型日报 2024-07-24 大模型资讯 Meta发布最大Llama 3 AI模型，语言和数学能力提升 摘要: Meta公司发布了其迄今为止最大的Llama 3人工智能模型。该模型主要免费提供，具备多语言处理能力，并在语言和数学方面表现出显著提升。 Meta发布最强AI…...
作业7.26~28
全双工： 通信双方 既可以发送，也可以接收数据 1. 利用多线程 或者 多进程， 实现TCP服务器 和 客户端的全双工通信 思路： 服务器和客户端， 在建立通信以后，可以创建线程，在线程编写另一个功能代…...
自定义webIpad证件相机(webRTC)
该技术方案可用于各浏览器自定义相机开发 相机UI（index.html） <!DOCTYPE html> <html lang"zh" prew"-1"><head><meta charset"UTF-8"><meta name"viewport"content"user-sc…...
GO发票真伪批量查验方法、数电票查验接口
“教”给机器标注数据的正确率就决定了人工智能判断的正确率。翔云人工智能开放平台的OCR产品经过我们的开发人员精心调“教”，识别率高、识别速度快。 发票，是发生的成本、费用或收入的原始凭证。于公司来说，发票主要是公司做账的依据&…...
【Go系列】Go的UI框架Fyne
前言 总有人说Go语言是一门后端编程语言。 Go虽然能够很好地处理后端开发，但是者不代表它没有UI库，不能做GUI，我们一起来看看Go怎么来画UI吧。 正文 Go语言由于其简洁的语法、高效的性能和跨平台的编译能力，非常适合用于开发GUI…...
.NET MAUI：跨平台开发的未来
常用资源 （1）.NET MAUI8构建应用文档。 Build your first .NET MAUI app - .NET MAUI | Microsoft Learn 一、什么是 .NET MAUI？ .NET Multi-platform App UI (.NET MAUI) 是微软推出的一款跨平台开发框架。作为 Xamarin.Forms 的下一代产…...
VSCode切换默认终端
我的VSCode默认终端为PowerShell，每次新建都会自动打开PowerShell。但是我想让每次都变为cmd，也就是Command Prompt 更改默认终端的操作方法如下： 键盘调出命令面板（CtrlShiftP）中,输入Terminal: Select Default Prof…...
卫星观测叶绿素的相反信号
Contrasted Trends in Chlorophyll-a Satellite Products 运用卫星产品研究Chl的长时间序列变化时需要注意 Introduction （1）研究叶绿素的长期变化，需要至少40年的长时间序列； （2）Tian and Zhang 2023报告…...
2024年最新NVIDIA T4价格表及行业趋势！
英伟达（NVIDIA）作为目前全球T0级别的GPU制造商，其T4系列显卡以其卓越的计算性能和能效比，在数据中心、云计算及AI领域占据重要地位。 一、NVIDIA T4价格表概览 在探讨NVIDIA T4显卡的价格时，我们需要从直接购买和租赁…...
HTML + CSS编程规范
编程规范 HTML CSS 命名规范 HTML CSS 命名规范 1. 命名需要是具备语义性的单词，不能用 数字 拼音 数字,符号开头正确示范 ： wrap description title content错误示范 : aaaa a1 $we 4tdds 2. 命名需要多个单词连接的情况下, 标记语言中可以使用 …...
机器学习之人脸识别-使用 scikit-learn 和人工神经网络进行高效人脸识别
文章摘要 本文将介绍如何使用 Python 的 scikit-learn 库和人工神经网络（ANN）来识别人脸。我们将使用 LFW 数据集（Labeled Faces in the Wild），这是一个广泛用于人脸识别基准测试的大型人脸数据库。我们将展示如何准备…...
【虚拟化】KVM概念和架构
目录 一、什么是KVM？ 二、KVM的功能 2.1 主要的功能 2.2 其它功能 三、KVM核心组件及作用 四、KVM与VMware的优势 五、KVM架构 六、qemu介绍 七、创建虚拟机流程 一、什么是KVM？ Kernel-based Virtual Machine的简称，KVM 是基于虚拟…...
【Linux】权限2
Linux文件要被执行满足两个条件: ①必须要具备可执行权限 x ②真的是一个可执行程序 1.权限的修改,文件强行给别人 权限就是拦住一批人,不让他做特定的一件事情 a.更改人,更改文件所隶属的人 如果把文件强行给别人, chown xxx(普通用户) xxx(文件名) 会出现下面的情况 很明显…...
汽车长翅膀：GPU 是如何加速深度学习模型的训练和推理过程的？
编者按：深度学习的飞速发展离不开硬件技术的突破，而 GPU 的崛起无疑是其中最大的推力之一。但你是否曾好奇过，为何一行简单的“.to(‘cuda’)”代码就能让模型的训练速度突飞猛进？本文正是为解答这个疑问而作。 作者以独特的视角&…...
GPT-5 API 费率全拆解：2026 各平台真实价格对比，附省钱方案
GPT-5 API 费率全拆解：2026 各平台真实价格对比，附省钱方案 前言 2026 年大模型 API 竞争进入白热化阶段，GPT-5 各平台价格差异巨大。本文实测对比主流平台费率，帮你找到最佳方案。 各平台费率对比 平台GPT-5 输入GPT-5 输出特…...
简历匹配已成过去式：AI招聘选型的避坑与实战指南
讲真，最近这一年，我听到最多的一句抱怨就是：“我们花了大几十万上的AI招聘系统，怎么用着用着，就只剩下‘自动筛简历’和‘群发面试通知’的功能了？” 在2026年这个节点，如果一家公司的AI招聘系统…...
AnythingLLM文档处理革命：如何用统一接口解析20+文件格式构建智能知识库
AnythingLLM文档处理革命：如何用统一接口解析20文件格式构建智能知识库 【免费下载链接】anything-llm 这是一个全栈应用程序，可以将任何文档、资源（如网址链接、音频、视频）或内容片段转换为上下文，以便任何大语言模型…...
OpenClaw技能开发入门：为百川2-13B模型定制专属文件处理插件
OpenClaw技能开发入门：为百川2-13B模型定制专属文件处理插件 1. 为什么需要自定义文件处理技能？ 去年夏天，我的桌面上堆积了超过2000份未分类的文档——包括技术笔记、会议记录、临时下载的论文和各种截图。当我尝试用现有工具整理时&#…...
智能协作：让快马AI成为你的算法优化顾问，自动分析并改进代码
今天想和大家分享一个特别实用的开发技巧——如何用AI辅助优化算法代码。作为一个经常和动态规划算法打交道的开发者，我发现InsCode(快马)平台的AI功能真的能帮我们省去很多重复劳动。 先说说我最近遇到的一个实际问题：经典的0-1背包问题。虽然动态规划…...
掌握Agentic RAG：动态智能代理，提升大模型学习与实战效率，CSDN小白程序员必收藏！
掌握Agentic RAG：动态智能代理，提升大模型学习与实战效率，CSDN小白程序员必收藏！ Agentic RAG技术通过引入自主AI代理，解决了传统RAG系统依赖静态数据的局限性，实现实时检索最新数据，灵活调整策…...
论文写作“黑科技”：书匠策AI，让课程论文创作如虎添翼！
在学术探索的征途中，每一位学子都渴望拥有一把开启智慧之门的钥匙，尤其是在面对课程论文这一挑战时，更是希望能有得力助手助自己一臂之力。今天，就让我带你揭开书匠策AI科研工具的神秘面纱，看看它是如何成为你课程论文…...
07_gstack并行开发：Git Worktrees与Conductor多会话管理
07_gstack并行开发：Git Worktrees与Conductor多会话管理关键字：gstack、Git Worktrees、Conductor、并行开发、多会话管理、Claude Code、并行sprint、Garry Tan、AI并行工作流“One sprint, one person, one feature — that takes about 30 minutes wi…...
Mirage Flow互联网信息整合应用：智能爬虫与内容摘要生成系统
Mirage Flow互联网信息整合应用：智能爬虫与内容摘要生成系统 每天一睁眼，互联网上的信息就像潮水一样涌来。你想了解某个行业动态，或者追踪一个热点事件，光是打开几十个网页、一篇篇看下来，眼睛都花了，最后…...
AndEngine跨平台开发指南：如何适配不同分辨率的Android设备
AndEngine跨平台开发指南：如何适配不同分辨率的Android设备 【免费下载链接】AndEngine Free Android 2D OpenGL Game Engine 项目地址: https://gitcode.com/gh_mirrors/an/AndEngine AndEngine作为一款免费的Android 2D OpenGL游戏引擎，为开发者…...