创建第一个Electron程序

前置准备

  • 创建一个文件夹,如: electest
  • 进入文件夹,初始化npm

npm init -y

  • 安装electron依赖包

注,这里使用npm i -D electron会特别卡,哪怕换成淘宝源也不行。可以使用下面方式安装。
首先,安装yarn
npm i -g yarn
随后,指定yarn的源
yarn config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/
最后,安装yarn
yarn add -D electron@19.0.0
注意,这里可以不指定版本,直接安装最新的

创建程序

1.在根目录创建main.js文件
2.在package.json中,修改main文件

"main": "main.js",

3.在main.js中,构建第一个简单的electron程序

const { app, BrowserWindow } = require('electron')const createWindow = () => {const win = new BrowserWindow({width: 1000,height: 800})win.loadURL('https://www.baidu.com/')
}app.whenReady().then(createWindow)

4.在package.json中,增加启动electron程序的脚本

  "scripts": {"start": "nodemon --exec electron ."},

5.启动项目

npm start

此时,效果如图:
electron弹出框

因个人需要,后面会学习一些electron相关的知识,如果有时间,也会在博客上同步一些学习到的知识点,希望对大家有所帮助。
感谢阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/783254.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从打开电视的过程认识接口(Java)

目录 问题引入 接口 什么是接口 接口的特点 简单理解接口 接口的实现 TV接口及其实现 Controlor接口及其实现 注意 情景实现 代码 输出 问题引入 在面向对象的世界里,不妨设想,我们打开电视需要些什么呢?显然的,首…

Leetcode刷题记录面试基础题day1(备战秋招)

hello,你好鸭,我是康康,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行!💪💪💪 目前博客主要更新Java系列、数据库、项目案例、计算机基础等知识点。感谢你的阅读和…

C/C++游戏编程实例-飞翔的小鸟

飞翔的小鸟游戏设计 首先需要包含以下库&#xff1a; #include<stdio.h> #include<windows.h> #include<stdlib.h> //包含system #include<conio.h>设置窗口大小&#xff1a; #define WIDTH 50 #define HEIGHT 16设置鸟的结构&#xff1a; struct …

CentOs7.9中修改Mysql8.0.28默认的3306端口防止被端口扫描入侵

若你的服务器被入侵&#xff0c;可以从这些地方找到证据&#xff1a; 若有上述信息&#xff0c;300%是被入侵了&#xff0c;重装服务器系统以后再重装Mysql数据库&#xff0c;除了设置一个复杂的密码以外&#xff0c;还需要修改默认的Mysql访问端口&#xff0c;逃避常规端口扫描…

wps没保存关闭了恢复数据教程

有时候我们因为电脑问题会忘记保存就关闭wps导致数据丢失&#xff0c;不知道wps没保存关闭了怎么恢复数据&#xff0c;其实数据是无法恢复的。 wps没保存关闭了怎么恢复数据 1、wps没有数据恢复功能&#xff0c;不过可以开启自动备份。 2、我们可以先点击wps左上角的“文件”…

全国超市数据可视化仪表板制作

全国超市消费数据展示 指定 Top几 客户销费数据展示 指定 Top几 省份销费数据展示 省份销售额数据分析 完整结果

Taro+vue3 监听当前的页面滚动的距离

1.需求 想实现一个这样的效果 一开始这个城市组件 是透明的 在顶部 的固定定位 当屏幕滑动的时候到一定的距离 将这个固定的盒子 背景颜色变成白色 2.Taro中的滚动 Taro中的滚动 有固定的api 像生命周期一样 这个生命周期是 usePageScroll import Taro, { useDidShow, useP…

蓝桥杯day14刷题日记

P8707 [蓝桥杯 2020 省 AB1] 走方格 思路&#xff1a;很典型的动态规划问题&#xff0c;对于偶数格特判&#xff0c;其他的正常遍历一遍&#xff0c;现在所处的格子的方案数等于左边的格子的方案数加上上面格子的方案数之和 #include <iostream> using namespace std; …

Linux系统下NAT网卡出现问题,无法上网的解决办法

NTA连接无法上网&#xff0c;如果你试过网上所有教程&#xff0c;检测了Windows环境和Ubuntu环境没问题&#xff0c;且无法启动系统服务、ping网络失败、重置虚拟机网络配置器也无效等种种以下所列原因无法解决&#xff0c;可能在于没有获取IP地址&#xff0c;才不能上网 netw…

书生·浦语大模型实战营 | 第1次学习笔记

前言 书生浦语大模型应用实战营 第二期正在开营&#xff0c;欢迎大家来学习。&#xff08;参与链接&#xff1a;https://mp.weixin.qq.com/s/YYSr3re6IduLJCAh-jgZqghttps://mp.weixin.qq.com/s/YYSr3re6IduLJCAh-jgZqg&#xff09; 第一堂课的视频链接&#xff1a;https://m…

多系统使用ffmpeg读取麦克风数据

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、命令行1.Ubuntu1.alsa2.pulseaudio 2.Windows1.dshow 二、代码总结 前言 最近在搞一个项目需要用到麦克风读取数据并分析&#xff0c;我的开发环境是Ubunt…

Android 12系统源码_多窗口模式(一)和多窗口模式相关方法的调用顺序

前言 从 Android 7.0 开始&#xff0c;Google 推出了一个名为“多窗口模式”的新功能&#xff0c;允许在设备屏幕上同时显示多个应用&#xff0c;多窗口模式允许多个应用同时共享同一屏幕&#xff0c;多窗口模式&#xff08;Multi Window Supports&#xff09;目前支持以下三种…

我的C++奇迹之旅相遇:支持函数重载的原理

文章目录 &#x1f4dd;前言&#x1f320; C支持函数重载的原理&#xff1a;名字修饰(name Mangling)&#x1f309;不同编译器不同函数名修饰规则 &#x1f320;Windows下名字修饰规则&#x1f6a9;总结 &#x1f4dd;前言 函数重载概念 函数重载&#xff1a;是函数的一种特殊…

大模型面试准备(九):简单透彻理解MoE

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对大模型技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何备战、面试常考点分享等热门话题进行了深入的讨论。 合集在这…

Linux(CentOS7)安装 MySQL8

目录 下载 上传 解压 创建配置文件 初始化 MySQL 服务 启动 MySQL 服务 连接 MySQL 创建软链接 下载 官方地址&#xff1a; MySQL :: Download MySQL Community Serverhttps://dev.mysql.com/downloads/mysql/选择版本前需先看一下服务器的 glibc 版本 ldd --versio…

浏览器工作原理与实践--垃圾回收:垃圾数据是如何自动回收的

在上一篇文章中&#xff0c;我们提到了JavaScript中的数据是如何存储的&#xff0c;并通过例子分析了原始数据类型是存储在栈空间中的&#xff0c;引用类型的数据是存储在堆空间中的。通过这种分配方式&#xff0c;我们解决了数据的内存分配的问题。 不过有些数据被使用之后&am…

CVE-2023-38408漏洞修复 - 升级openssl和openssh

CVE-2023-38408 OpenSSH 代码问题漏洞修复 - 升级openssl和openssh ※ 重要说明&#xff1a; 1、升级后会导致无法用ssh远程登录&#xff0c;提示“Permission denied, please try again.” 2、解决方案请查看本章节【三、解决升级后无法用ssh远程登录】 目录 CVE-2023-38408 O…

WebScraper网页数据爬取可视化工具使用(无需编码)

前言 Web Scraper 是一个浏览器扩展&#xff0c;可以实现无需编码即可爬取网页上的数据。只需按照规则进行配置&#xff0c;即可实现一键爬取导出数据。 安装 进入Google应用商店安装此插件&#xff0c;安装步骤如下&#xff1a; 进入Google应用商店需要外网VPN才能访问&…

微服务demo(三)nacosfeign

一、feign使用 1、集成方法 1.1、pom consumer添加依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId><version>2.2.6.RELEASE</version></dependency&…

WEB APIS知识点案例总结

随机点名案例 业务分析: 点击开始按钮随机抽取数组中的一个数据,放到页面中点击结束按钮删除数组当前抽取的一个数据当抽取到最后一个数据的时候,两个按钮同时禁用(只剩最后一个数据不用抽了) 核心:利用定时器快速展示,停止定时器结束展示 <!DOCTYPE html> <html…