安装使用electron

news2024/11/18 18:39:32

一、安装node和npm

运行cmd查看是否安装及版本号

npm -v
node -v

二、安装electron

npm直接安装会报错缺少什么文件,使用cnpm进行安装

直接安装cnmp后,再用cnmp命令安装可能会报错Error: Cannot find module ‘node:util’

原因是npm版本与cnpm版本,先卸载再指定版本安装

// 卸载原先版本
npm uninstall cnpm

// 安装指定版本
npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org

// 查看安装版本
cnpm -v

// 全局安装electron
cnpm install -g electron

// 查看electron版本
electron -v

三、安装打包输出工具

cnpm install -g electron-packager

四、安装electron客户端

打开淘宝镜像网站链接https://npm.taobao.org/mirrors/electron/​​

找到对应版本的压缩包进行下载并解压

五、创建electron应用

该应用文件夹包含三个文件

package.json文件

{
    "name": "medical",
    "version": "0.1.0",
    "main": "main.js"
}

 main.js文件

var electron = require("electron");
var app = electron.app; // 控制应用生命周期的模块。
var BrowserWindow = electron.BrowserWindow; // 创建原生浏览器窗口的模块
// 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,
// window 会被自动地关闭
var mainWindow = null;
// 当所有窗口被关闭了,退出。
app.on("window-all-closed", function () {
  // 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前
  // 应用会保持活动状态
  if (process.platform != "darwin") {
    app.quit();
  }
});
// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on("ready", function () {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  // 加载应用的 index.html
  mainWindow.loadURL("file://" + __dirname + "/index.html");
  // 打开开发工具
  mainWindow.openDevTools();
  // 当 window 被关闭,这个事件会被发出
  mainWindow.on("closed", function () {
    // 取消引用 window 对象,如果你的应用支持多窗口的话,
    // 通常会把多个 window 对象存放在一个数组里面,
    // 但这次不是。
    mainWindow = null;
  });
});

index.html文件

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World!</h1>
    We are using io.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>

六、运行应用

cmd打开该文件所在目录,输入命令electron .即可运行

electron .

或者找到electron.exe文件路径,后面加空格再输入应用路径即可运行

七、electron与vue的结合使用

将vue文件打包后替换掉原先的index.html

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

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

相关文章

高中学历,月薪3000服务员,用四个月“改命”进国企,变身网络安全工程师

最近几年&#xff0c;不少年轻人都感到非常焦虑&#xff0c;压力大&#xff0c;迷茫。在时代变迁的洪流中&#xff0c;如何获得内心的平静呢&#xff1f; ——成长。 “只有认知突破&#xff0c;才能带来真正的成长。”这是雷军在8月14日年度演讲中提到的&#xff0c;近十年来…

OPENCV实现计算描述子

1、计算描述子 kp,des = sift.computer(img,kp) 2、其作用是进行特征匹配 3、同时计算关键点和描述 3.1、kp,des = sift.detectAnd Computer(img,...)

kali更换gnome并自定义登录界面

文章目录 安装gnome修改登录界面 Gnome是linux下比较好看的一款Linux图形化界面&#xff0c;发现网上的教程很多各式各样&#xff0c;有些还是错误的不能正确更换&#xff0c;或者不能修改登录界面 安装gnome 我们只需要执行sudo apt install gnome命令即可。 这个过程会花费很…

包含文心一言在内的首批国产大模型 全面开放

8月31起&#xff0c;国内 11 家通过《生成式人工智能服务管理暂行办法》备案的 AI 大模型产品将陆续上线&#xff0c;面向全社会开放。北京 5 家大模型产品分别是百度的 “文心一言”、抖音的 “云雀”、百川智能的 “百川大模型”、清华系 AI 公司智谱华章旗下的 “智谱清言”…

为什么过早的优化是万恶之源

为什么过早的优化是万恶之源? 缘起 Donald Knuth&#xff08;高德纳&#xff09; 是一位计算机科学界的著名学者和计算机程序设计的先驱之一。他被誉为 计算机科学的“圣经”《计算机程序设计艺术》的作者 &#xff0c;提出了著名的“大O符号”来描述算法的时间复杂度和空间…

ABB PCD231B通信输入/输出模块

多通道输入和输出&#xff1a; PCD231B 模块通常配备多个输入通道和输出通道&#xff0c;用于连接传感器、执行器和其他设备。 通信接口&#xff1a; 这种模块通常支持各种通信接口&#xff0c;如以太网、串口&#xff08;RS-232、RS-485&#xff09;、Profibus、CAN 等&#…

MIMIC-IV数据提取教程

一、获取MIMIC-IV数据库 MIMIC-IV数据库需要申请权限&#xff0c;具体怎么申请我之前的博客发的有:MIMIC数据库申请流程 以最新的MIMIC-IV 2.2版本为例&#xff0c;首先打开页面拖动到最底端&#xff1a;https://physionet.org/content/mimiciv/2.2/ 直接下载解压下来&#x…

vue3中如何使用el-tooltip中的插槽达到换行效果

el-tooltip的content属性中的内容可以使用插槽来替换 话不多说&#xff0c;直接上代码 <el-tooltip effect"light" placement"top-start"><div slot"content" class"tips"> // 在这里运用插槽<p class"tip-tex…

dayjs格式转换成日期

目录 方法一&#xff1a; ​编辑方法二&#xff1a; 这个项目在筛选订单时间的时候是由前端进行筛选的&#xff0c;用的是adt-design-pro进行二开的&#xff0c;其中在用日期组件的时候遇到了一个问题&#xff0c;组件返回的是&#xff1a; 但是我需要的是年-月-日&#xff…

Fair|Fur —— 介绍

Hair Utils工具架&#xff0c;可快速设置毛发对象&#xff0c;及动画和解算&#xff1b; Guide Process工具架&#xff0c;用于设置毛发样式&#xff0c;可通过绘制皮肤属性来影响引导毛发的位置和方向&#xff1b; 创建毛发Fur&#xff0c;起始于一几何体&#xff0c;然后使用…

开源图形驱动在OpenHarmony上的使用和落地

本文转载自 OpenHarmony TSC 官方微信公众号《峰会回顾第10期 | 开源图形驱动在OpenHarmony上的使用和落地》 演讲嘉宾 | 黄 然 回顾整理 | 廖 涛 排版校对 | 李萍萍 嘉宾简介 黄然&#xff0c;华为终端BG软件部资深图形技术专家&#xff0c;华为终端游戏标准、工具和分析创…

探索医疗行业的低代码平台:了解适用于医疗领域的最佳选择

数字化的进程已经渗透到各行各业&#xff0c;包括医疗行业&#xff0c;很多医院也开始实现数字化管理&#xff0c;依托低代码平台。 医疗管理涉及从组织员工到管理患者&#xff0c;再到保存医疗机构资源等各个方面。医疗保健管理的范围因机构规模(当地诊所或专科医院)而异。通…

字节跳动推出AI对话工具“豆包”:免费用

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 听说松松客服的小马爆料了一个消息&#xff1a;字节跳动推出了一个新的AI大模型对话工具&#xff0c;叫做“豆包”。竟然一查发现&#xff0c;早在8月18号就已经上线了呢。原来这个“豆包”其实是之…

实训笔记8.31

实训笔记8.31 8.31笔记一、项目开发流程一共分为七个阶段1.1 数据产生阶段1.2 数据采集存储阶段1.3 数据清洗预处理阶段1.4 数据统计分析阶段1.5 数据迁移导出阶段1.6 数据可视化阶段 二、项目数据清洗预处理的实现2.1 清洗预处理规则2.2 代码实现 三、项目的数据统计分析阶段3…

NoSQL基础

零、文章目录 NoSQL基础 1、为什么要用NoSQL &#xff08;1&#xff09;单机单数据库时代 网络不发达的时代&#xff0c;一个系统由一台机器&#xff0c;一个数据库来实现&#xff0c;只要流量上来&#xff0c;首先性能瓶颈就是数据库IO。 &#xff08;2&#xff09;Cache数…

C语言指针进阶(3)

这节我们来总结一下指针和数组面试题。 在这节我们主要用到这样几个知识点&#xff1a; 1.数组名是数组首元素的地址。 但是有两个例外&#xff1a; 2.sizeof(数组名)&#xff0c;这里的数组名表示整个数组&#xff0c;计算的是整个数组的大小&#xff0c;单位是字节。 3.&…

Wazuh部署之单节点部署

Linux进行Wazuh单机部署 1. Wazuh索引器安装2. Wazuh服务器安装3. Wazuh仪表盘安装4. 踩坑记录 1. Wazuh索引器安装 1.1 证书创建 生成SSL证书 下载wazuh-certs-tool.sh脚本和config.yml配置文件。这将创建证书&#xff0c;对Wazuh中心组件之间的通信进行加密。 curl -sO h…

MySQL高阶查询语句

目录 一、常用查询 1、按关键字排序 1.1 升序排序 1.2 降序排序 1.3 结合where进项条件过滤再排序 1.4 多条件排序 2、区间判断及查询不重复记录 2.1 and/or&#xff08;且/或&#xff09; 2.2 嵌套 /多条件 2.3 distinct 查询不重复记录 3、对结果进行分组 4、限…

基于YOLOV8模型和CCPD数据集的车牌目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOV8模型和CCPD数据集的车牌目标检测系统可用于日常生活中检测与定位车牌目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算…

Day51|leetcode 309.最佳买卖股票时机含冷冻期、714.买卖股票的最佳时机含手续费

leetcode 309.最佳买卖股票时机含冷冻期 题目链接&#xff1a;309. 买卖股票的最佳时机含冷冻期 - 力扣&#xff08;LeetCode&#xff09; 视频链接&#xff1a;动态规划来决定最佳时机&#xff0c;这次有冷冻期&#xff01;| LeetCode&#xff1a;309.买卖股票的最佳时机含冷冻…