electron教程(一)创建项目

一、方式①

根据官网描述将electron/electron-quick-start项目克隆下来并启动

electron/electron-quick-start地址:

GitHub - electron/electron-quick-start: Clone to try a simple Electron app

git clone https://github.com/electron/electron-quick-start.git

一、方式②

创建自己的项目

1.cmd打开运行窗口
mkdir demo-electron-app && cd demo-electron-app
npm init
2.根据提示确认

 3.修改package.json文件
{"name": "demo-electron-app","version": "1.0.0","description": "my-app","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "ljx","license": "ISC"
}

4.安装electron 

npm容易报错,建议用cnpm

npm install --save-dev electron

package.json文件中添加运行命令

 "start": "nodemon --watch main.js --exec npm run build", // 如果没安装nodemon,这行不要"build": "electron ."

建议:在node环境中,安装nodemon,官网介绍,自行了解:诺德蒙 - NPM (npmjs.com)

安装步骤:

  1. win+r,输入cmd,打开运行窗口
  2. 输入npm install -g nodemon
  3. nodemon -v检查是否安装成功

5.创建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>我的app</title>
</head><body><h1>Hello World!</h1>我们正在使用 Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.
</body></html>
6.创建main.js文件

主进程文件

const { app, BrowserWindow } = require('electron')
const path = require('node:path')// 创建窗口
const createWindow = () => {// 设置窗口大小const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 当前窗口显示的页面win.loadFile('index.html')
}// app启动后创建窗口
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 关闭所有窗口时退出应用
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})
7.创建preload.js文件

预加载文件,通过 contextBridge 定义一个全局变量 versions 的示例如下:

const { contextBridge } = require('electron/renderer')contextBridge.exposeInMainWorld('versions', {node: () => process.versions.node,chrome: () => process.versions.chrome,electron: () => process.versions.electron
})
8.创建renderer.js文件

通过全局变量 versions 可以获取浏览器/node/electron版本信息,并将这些信息插入到html中

const information = document.getElementById('info')
information.innerText = `本应用正在使用 Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), 和 Electron (v${versions.electron()})`

 在index.html文件中添加id=info的标签,并引入render.js文件

<div id="info"></div><script src="./renderer.js"></script>
 9.启动看效果
npm run build

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

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

相关文章

代码随想录Day71(图论Part07)

53.寻宝 题目&#xff1a;53. 寻宝&#xff08;第七期模拟笔试&#xff09; (kamacoder.com) 思路&#xff1a;首先&#xff0c;我不知道怎么存这样的东西&#xff0c;用三维数组吗&#xff0c;没搞懂&#xff0c;果断放弃 prim算法实现 import java.util.*;class Main {publi…

LeetCode 3099.哈沙德数:计算一个数十进制下各位之和

【LetMeFly】3099.哈沙德数&#xff1a;计算一个数十进制下各位之和 力扣题目链接&#xff1a;https://leetcode.cn/problems/harshad-number/ 如果一个整数能够被其各个数位上的数字之和整除&#xff0c;则称之为 哈沙德数&#xff08;Harshad number&#xff09;。给你一个…

Github 2024-06-30开源项目日报 Top10

根据Github Trendings的统计,今日(2024-06-30统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C#项目1Python项目1PowerShell项目1JavaScript项目1Jupyter Notebook项目1TypeScript项目1PHP项目1C++项目1Swift项目1Rust项目1shadcn/ui: 开源…

Laravel介绍与学习入门

Laravel 是一款优雅且功能强大的 PHP Web 开发框架&#xff0c;它被广泛认为是 PHP 领域内构建现代 Web 应用程序的最佳选择之一。Laravel 提供了一套简洁、富有表现力的语法&#xff0c;使得开发者能够高效地编写清晰、可维护的代码。以下是 Laravel 的一些关键特点和入门概念…

实战项目——用Java实现图书管理系统

前言 首先既然是管理系统&#xff0c;那咱们就要实现以下这几个功能了--> 分析 1.首先是用户分为两种&#xff0c;一个是管理员&#xff0c;另一个是普通用户&#xff0c;既如此&#xff0c;可以定义一个用户类&#xff08;user&#xff09;&#xff0c;在定义管理员类&am…

DMA学习笔记

参考文章 https://blog.csdn.net/as480133937/article/details/104927922 DMA简介 DMA&#xff0c;全称Direct Memory Access&#xff0c;即直接存储器访问。DMAC 即 DMA 控制器&#xff0c;提供了一种硬件的数据传输方式&#xff0c;无需 CPU 的介入&#xff0c;可以处理外…

7.6、指针和数组

代码 #include <iostream> using namespace std;int main() {//指针和数组//利用指针访问数组中的元素int arr[10] { 1,2,3,4,5,6,7,8,9,10 };cout << "第一个元素为&#xff1a;" << arr[0] << endl;int * p arr;//arr就是数组首地址co…

kaggle量化赛金牌方案(第七名解决方案)(下)

— 无特征工程的神经网络模型&#xff08;得分 5.34X&#xff09; 比赛进入最后阶段&#xff0c;现在是时候深入了解一些关于神经网络模型的见解了。由于 Kaggle 讨论区的需求&#xff0c;我在这里分享两个神经网络模型。第一个是 LSTM 模型&#xff0c;第二个是卷积网络&…

华为机试HJ6质数因子

华为机试HJ6质数因子 题目&#xff1a; 按照从小到大输出给定数值的质数因子 想法&#xff1a; 遍历判断从小到大的数值是否是给定数值的质数因子&#xff0c;是就直接输出&#xff0c;该方法输出的数值已经排序好了 import mathinput_number int(input())# 循环判断提取…

鸿翼FEX文件安全交换系统,打造安全高效的文件摆渡“绿色通道”

随着数字经济时代的到来&#xff0c;数据已成为最有价值的生产要素&#xff0c;是企业的重要资产之一。随着数据流动性的增强&#xff0c;数据安全问题也随之突显。尤其是政务、金融、医疗和制造业等关键领域组织和中大型企业&#xff0c;面临着如何在保障数据安全的同时&#…

llm学习-3(向量数据库的使用)

1&#xff1a;数据读取和加载 接着上面的常规操作 加载环境变量---》获取所有路径---》加载文档---》切分文档 代码如下&#xff1a; import os from dotenv import load_dotenv, find_dotenvload_dotenv(find_dotenv()) # 获取folder_path下所有文件路径&#xff0c;储存在…

【力扣 - 每日一题】3099. 哈沙德数 | 模拟 (Go/C++)

题目内容 如果一个整数能够被其各个数位上的数字之和整除&#xff0c;则称之为 哈沙德数&#xff08;Harshad number&#xff09;。给你一个整数 x 。如果 x 是 哈沙德数 &#xff0c;则返回 x 各个数位上的数字之和&#xff0c;否则&#xff0c;返回 -1 。 示例 1&#xff1…

C++Primer Plus 第十四章代码重用:编程练习,第3题

CPrimer Plus 第十四章代码重用&#xff1a;编程练习,第3题 编程练习,第3题 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 CPrimer Plus 第十四章代码重用&#xff1a;编程练习,第3题前言定义一个 QueueTp 模板…

中国国产AI芯片的崛起

一、CUDA的垄断 当讨论半导体行业面临的挑战时&#xff0c;你首先想到的是什么&#xff1f;光刻机&#xff1f;3纳米或者5纳米技术&#xff1f;我们无法生产的完美方形芯片&#xff1f;是的&#xff0c;但也不完全是。 人们经常把半导体芯片归类为硬件产业&#xff0c;但实际上…

【大模型LLM面试合集】大语言模型基础_llm概念

1.llm概念 1.目前 主流的开源模型体系 有哪些&#xff1f; 目前主流的开源LLM&#xff08;语言模型&#xff09;模型体系包括以下几个&#xff1a; GPT&#xff08;Generative Pre-trained Transformer&#xff09;系列&#xff1a;由OpenAI发布的一系列基于Transformer架构…

Linux常用查看日志方法-如使用less查看日志文件

在Linux系统中&#xff0c;查看日志文件是常见的运维任务之一。less命令是一个非常强大的工具&#xff0c;用于查看长文本文件&#xff0c;例如日志文件。它允许你按页浏览文件&#xff0c;并提供了一些便捷的导航和搜索功能。 使用less查看日志文件 假设你有一个日志文件/va…

linux环境安装elasticsearch缓存数据库和Kibana客户端

linux环境安装elasticsearch缓存数据库&#xff0c;今天我们安装7.17.18版本&#xff0c;并分析遇到的问题。 一、elasticsearch安装运行 1、直接下载 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.17.18-linux-x86_64.tar.gz2、解压 tar -…

惊艳眼球的视觉盛宴【二】

当晨光初破黎明的静谧&#xff0c;一片绚烂便悄然铺展在蔚蓝的天际。那一刻&#xff0c;大地苏醒&#xff0c;万物复苏&#xff0c;我们仿佛踏入了一幅活生生的画卷。雾气缭绕之中&#xff0c;群山似乎在低语&#xff0c;古树在轻摇&#xff0c;一切都沐浴在柔和而金黄的光芒之…

如何理解vuex中的每个概念(通俗易懂)

文章目录 1. 什么是 Vuex&#xff1f;2. Vuex 的四个核心概念 1. 什么是 Vuex&#xff1f; 想象一下&#xff0c;你家里有一个大冰箱&#xff0c;所有家庭成员都可以访问这个冰箱。每个人都可以往里面放东西&#xff0c;也可以从里面拿东西。这个冰箱就像是 Vuex 中的“状态”…

战略流程-麦肯锡企业数字化业务变革成熟度评估模型及案例深度解析

一、企业变革成熟度评估模型 企业变革成熟度诊断模型是一种评估工具&#xff0c;用于全面扫描和评估企业在变革转型过程中的能力水平。该模型通过一系列量化指标和定性分析&#xff0c;对企业在不同变革领域的成熟度进行评分&#xff0c;从而帮助企业识别在变革过程中的优势和…