【electron】electron项目创建的方式:

文章目录

        • 【1】npm init @quick-start/electron(推荐)
        • 【2】 克隆仓库,快速启动
        • 【3】 通过脚手架搭建项目
        • 【4】 手动创建项目


【Electron官网】https://www.electronjs.org/zh/docs/latest/api/app

【1】npm init @quick-start/electron(推荐)

在命令行中执行以下命令:

npm init @quick-start/electron

该命令将安装并执行脚手架工具 create-electron 。你将看到一些可选功能的提示,例如框架 (vue, react, …) 和 TypeScript 支持:
创建项目后,按照说明安装依赖项并启动Electron程序:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

【2】 克隆仓库,快速启动

#1. 克隆项目;
git clone https://github.com/electron/electron-quick-start

#2. 进入这个项目下;
cd electron-quick-start

#3. 安装依赖;
npm install

#4. 运行项目;
npm start

打开快速启动的项目,主要有以下几个文件:
(1). index.html ,渲染进程;
(2). render.js,渲染进程,在index.html中引用;
(3). main.js,主进程;
(4). preload.js,监听DOM加载完成,在主进程中调用。

【3】 通过脚手架搭建项目

electron-forge是一个用来搭建electron项目的脚手架,不仅可以用来运行项目,还可以用来打包项目。
官网:Getting Started - Electron Forge

#如果电脑上安装了安装了最新版本的 node 可以使用 npx 创建项目,如果安装了 yarn 也可以使用 yarn 创建项目;
npx create-electron-app my-new-app或者yarn create electron-app my-new-app

#运行项目;
cd my-new-app  // 进入项目
npm start  // 启动项目

如果无法使用npx或是yarn安装项目,可以用传统的方法来完成。

// 安装脚手架
npm install -g @electron-forge/cli
 
// 初始化项目
electron-forge init my-new-app
 
// 进入项目
cd my-new-app
 
// 启动项目
npm start

【4】 手动创建项目

  1. 新建项目文件夹;
  2. 新建渲染进程 index.html 文件与主进程 main.js 文件;
  3. 初始化项目,创建package.json;
npm init 
#请注意,package.json中的主文件必须名为main.js。 
  1. 在项目中安装Electron;虽然在全局有安装Electron,但是在写代码的时候并没有提示,所以需要进入项目中安装一下,这样就会有提示了。
cnpm i electron --save-dev
  1. 编写主进程main.js代码;
const { app, BrowserWindow } = require("electron");
const path = require("path");
 
const createWindow = ()=>{
    // 创建窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });
    // 加载本地文件
    mainWindow.loadFile(path.join(__dirname,"index.html"));
    // 加载远程地址
    // mainWindow.loadURL('https://github.com');
}
 
// 监听应用的启动事件
app.on("ready",createWindow);
 
// 兼容MacOS系统的窗口关闭功能
app.on("window-all-closed",()=>{
    // 非MacOS直接退出
    if(process.platform!="darwin"){
        app.quit();
    }
});
 
// 点击MacOS底部菜单时重新启动窗口
app.on("activate",()=>{
    if(BrowserWindow.getAllWindows.length==0){
        createWindow();
    }
})
  1. 引入eslint 检查代码;
(1). 安装eslint;

cnpm install -g eslint
(2). 在项目中初始化eslint;

eslint --init
初始化时会有各种选项,选项可以参考下面的结果。 
  1. 运行项目;
electron .

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Mysql_5.7下载安装与配置基础操作教程

目录 一、Mysql57下载与安装 二、尝试登录Mysql 三、配置Mysql环境变量 一、Mysql57下载与安装 首先,进入Mysql下载官网:MySQL Community Downloads 随后,选择版本5.7.43,系统选择Windows,随后下方会出现两个下载选…

又双叒叕!五大数据库全方位注释,抗性宏基因组分析项目再次升级!

基于宏基因组测序的抗性基因分析是目前ARGs分析的重要手段,五大数据库全面注释分析,一网打尽ARGs、MRGs、BRGs、MGEs、致病菌注释。 项目报告不仅包含抗性基因的多样性、丰度和分布模式,还能获得包括抗性组变化驱动因素、指示基因识别、抗性组…

Python爬虫:js逆向调式操作及调式中遇到debugger问题

Python爬虫:js逆向调式操作及调式中遇到debugger问题 1. 前言2. js逆向调式操作2.1 DOM事件断点2.2 XHR/提取断点(用于请求接口参数加密处理)2.3 请求返回的数据是加密的2.4 hook定位参数 3. 调式中遇到debugger问题3.1 解决方式(一律不在此处暂停)3.2 问题:点击一律…

企业到什么阶段需要进行数字化转型?

数字化转型并不是一个一刀切的过程,也不存在普遍规定企业必须在何时经历数字化转型的特定阶段。然而,有一些常见的触发因素或情况往往会促使企业考虑或踏上数字化转型之旅: 1.不断变化的商业格局:当企业面临客户行为、市场动态或…

【Alibaba中间件技术系列】「RocketMQ技术专题」小白专区之领略一下RocketMQ基础之最!

应一些小伙伴们的私信,希望可以介绍一下RocketMQ的基础,那么我们现在就从0开始,进入RocketMQ的基础学习及概念介绍,为学习和使用RocketMQ打好基础! RocketMQ是一款快速地、可靠地、分布式、容易使用的消息中间件&#…

基于X86六轮差速移动机器人运动控制器设计与实现(二)规划控制算法

带输入约束的 MPC 路径跟踪控制 MPC 算法是一种基于控制对象模型的控制方法,其优势在于在控制中考虑了 系统的多种物理约束,同时基于模型与当前机器人的反馈信息预估出未来机器人 位姿信息的处理方法可以解决控制迟滞的问题。 4.1 MPC 路径跟踪控…

创建一个简单的HTML Viewer应用程序

使用wxPython和内嵌浏览器来创建一个简单的HTML Viewer应用程序。 在本篇文章中,我们将使用Python和wxPython模块来创建一个简单的HTML Viewer应用程序。这个应用程序可以让用户输入HTML内容,并在内嵌浏览器中显示该内容的效果。 准备工作 在开始之前…

C# API 文档注释规范

C# API 文档注释规范 1. 命名空间注释(namespace)2. summary3. remarks and para4. param5. returns6. example and code7. exception8. typeparam 最近在开发工作中需要实现 API 帮助文档,如果根据所写的代码直接重写 API 帮助文档将会是意见非常大的工作量&#x…

无代码集成飞书连接更多应用

场景描述: 基于飞书开放平台能力,无代码集成飞书连接更多应用,打通数据孤岛。通过Aboter可轻松搭建业务自动化流程,实现多个应用之间的数据连接。 支持包括飞书事件监听和接口调用的能力: 事件监听: 用…

Python Web开发 Django 简介

今天来为大家介绍 Python 另一个 Web 开发框架 Django,它是一个基于 Python 定制的开源 Web 应用框架,最早源于一个在线新闻 Web 网站,后于2005年开源。Django 的功能大而全,它提供的一站式解决的思路,能让开发者不用在…

.NET Core6.0使用NPOI导入导出Excel

一、使用NPOI导出Excel //引入NPOI包 HTML <input type"button" class"layui-btn layui-btn-blue2 layui-btn-sm" id"ExportExcel" onclick"ExportExcel()" value"导出" />JS //导出Excelfunction ExportExcel() {…

【Hyper-V】Windows11 家庭版怎么启用虚拟机Hyper-V

在电脑Windows11系统上启用虚拟机Hyper-V&#xff0c;打开 启用和关闭WIndows功能&#xff0c;找到其中一项Hyper-V&#xff0c;对于家庭版的系统用户来说&#xff0c;这个选项是没有的&#xff0c;接下来讲一讲怎么开启。 安装Hyper-V 创建一个文件名为Hyper-v.bat&#xff…

在思科(Cisco)路由器中使用 SNMP

什么是SNMP SNMP&#xff0c;称为简单网络管理协议&#xff0c;被发现可以解决具有复杂网络设备的复杂网络环境&#xff0c;SNMP 使用标准化协议来查询网络上的设备&#xff0c;为网络管理员提供保持网络环境稳定和远离停机所需的重要信息。 为什么要在思科设备中启用SNMP S…

深入Redis线程模型

目录 1.前言 2.Redis为什么快&#xff1f; 3.Redis 为何选择单线程&#xff1f; 3.1可维护性 3.2并发处理 3.3性能瓶颈 4.Reactor设计模式 5.Redis4.0前 单线程模型 - Event Loop 6.Redis4.0后 多线程异步任务 7.Redis6.0后 多线程网络模型 1.前言 这篇文章我们主要围绕…

springBoot 简单的demo

springBoot 学习开始 场景开发流程1、创建项目2、导入依赖3、创建启动springBoot 项目的主入口程序4、创建业务程序5、在MainApplication文件运行程序6、将文件打包成jar包 遇到的问题未解决 希望大哥们帮忙--本地运行jar包报错 场景 浏览器发送hello请求&#xff0c;返回“he…

生成硬件报告

生成硬件报告 创建一个名为 /home/curtis/ansible/hwreport.yml 的 playbook &#xff0c;它将在所有受管节点上生成含有以下信息的输出文件 /root/hwreport.txt &#xff1a; 清单主机名称 以 MB 表示的总内存大小 BIOS 版本 磁盘设备 vda 的大小 磁盘设备 vdb 的大小 输出文件…

20款美规奔驰GLS450更换AMG GLS63原厂刹车卡钳,刹车效果强悍无比

对于M.Benz的车迷来说&#xff0c;AMG必定是他们的圣物&#xff0c;经过AMG改装的成品无一不是拥有动力强横&#xff0c;目操控性、舒适性都能够兼备的。下面所介绍的这套制动系统&#xff0c;便是由AMG出品的大六活塞卡钳及大直径开孔刹车碟&#xff0c;所组成的制动套件。

C语言入门_Day 6布尔数与比较运算

目录 前言 1.布尔数 2.比较运算 3.易错点 4.思维导图 前言 除了算术计算以外&#xff0c;编程语言中还会大量使用比较运算&#xff0c;并会根据比较运算的结果是“真”还是“假”&#xff0c;来执行不同的代码。 当你想买一杯奶茶&#xff0c;准备支付的时候&#xff0c;支…

UE4/5Niagara粒子特效学习(使用UE5.1,适合新手)

目录 创建空模板 创建粒子 粒子的基础属性 粒子的生命周期 颜色 大小设置 生成的位置 Skeletal Mesh Location的效果&#xff1a; Shape Location 添加速度 添加Noise力场 在生成中添加&#xff1a; 效果&#xff1a; ​编辑 在更新中添加&#xff1a; 效果&…

Python“牵手”shopee商品评论数据采集方法,shopeeAPI申请指南

Shopee平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范&#xff0c;ShopeeAPI接口是指通过编程的方式&#xff0c;让开发者能够通过HTTP协议直接访问Shopee平台的数据&#xff0c;包括商品信息、店铺信息、物流信息等&#xff0c;从而实现Sh…