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

news2024/11/25 2:44:51

文章目录

        • 【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 .

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

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

相关文章

六 动手学深度学习v2 ——权重衰退+dropout

1. 权重衰退 最常见的用来处理过拟合的方法 使用均方范数作为硬性限制 使用均方范数作为软性限制 总结: 正则化是处理过拟合的常用方法:在训练集的损失函数中加入惩罚项,以降低学习到的模型的复杂度。 保持模型简单的一个特别的选择是使用…

PostgreSQL查询慢sql原因和优化方案

PostgreSQL sql查询慢优化方案有一下几种解决方案: 1.关闭会话 查询慢sql的执行会话,关闭进程。 查看数据库后台连接进程 SELECT count(*) FROM pg_stat_activity;SELECT * FROM pg_stat_activity; 查看数据库后台连接进程,但是此条SQL不…

稳定的亚马逊测评需要具备哪些条件

自养号测评已经在跨境电商领域变得司空见惯。绝大部分卖家都已开始对店铺产品进行自测评。虽然平台和消费者对测评补单持反感态度,但在普遍测评的环境下,不参与测评可能会导致被市场淘汰。 目前,为了提高安全性,许多卖家已开始自…

自动化测试:你根本不懂自动化测试的快乐

接触了不少同行,由于他们之前一直做手工测试,现在很迫切希望做自动化测试,其中不乏工作5年以上的人。 本人从事软件自动化测试已经近6年,从server端到web端,从API到mobile,切身体会到自动化带来的好处与痛楚…

一分钟上手Vue VueI18n Internationalization(i18n)多国语言系统开发、国际化、中英文语言切换!

这里以Vue2为例子 第一步:安装vue-i18n npm install vue-i18n8.26.5 第二步:在src下创建js文件夹,继续创建language文件夹 在language文件夹里面创建zh.js、en.js、index.js这仨文件 这仨文件代码分别如下: zh.js export de…

Vue实现图片懒加载

Vue实现图片懒加载 前言1.使用vue-lazyload/vue3-lazyload插件2.自定义v-lazy懒加载指令2.1 使用VueUse工具集2.2 使用IntersectionObserver 前言 图片懒加载是一种常见性能优化的方式,它只去加载可视区域图片,而不是在网页加载完毕后就立即加载所有图片…

2023杭电多校第8场E题-0 vs 1

题目链接&#xff1a;http://csoj.scnu.edu.cn/contest/102/problem/1005 解题思路&#xff1a; 代码如下&#xff1a; #include<iostream> #include<math.h> #include<algorithm> using namespace std; const int N 1e5 10;int s[N], l, r; int now;int…

高并发系统设计要点

在系统设计时&#xff0c;如果能预先看到一些问题&#xff0c;并在设计层面提前解决&#xff0c;就会给后期的开发带来很大的便捷。相反&#xff0c;有缺陷的架构设计可能会导致后期的开发工作十分艰难&#xff0c;甚至会造成“推倒重来”的情形。因此&#xff0c;在系统设计阶…

蓝牙耳机运动耳机哪个好、蓝牙运动耳机推荐

尽管我对健身运动一直保持着热情&#xff0c;但有时候由于体力不支&#xff0c;难免会感到坚持困难。幸好&#xff0c;每次去健身房我都会戴上耳机&#xff0c;当动感的音乐流入耳朵&#xff0c;运动变得更加有趣&#xff0c;即使疲惫也能坚持到最后一秒。然而&#xff0c;要实…

PyTorch翻译官网教程-LANGUAGE MODELING WITH NN.TRANSFORMER AND TORCHTEXT

官网链接 Language Modeling with nn.Transformer and torchtext — PyTorch Tutorials 2.0.1cu117 documentation 使用 NN.TRANSFORMER 和 TORCHTEXT进行语言建模 这是一个关于训练模型使用nn.Transformer来预测序列中的下一个单词的教程。 PyTorch 1.2版本包含了一个基于论…

对于生产者消费者/shutdown/close的补充

信号量解决生产者消费者/读写者问题_右大臣的博客-CSDN博客 一点补充 模拟简单的string&#xff0c;循环队列&#xff0c;vector_右大臣的博客-CSDN博客 补充总结 写一个循环队列 用个循环队列去表示class myqueue{ vector<int>qq capacity 容量 front 头 rear 尾…

Python web实战之Django 的 WebSocket 支持详解

关键词&#xff1a;Python, Django, WebSocket, Web 如何使用 Django 实现 WebSocket 功能&#xff1f;本文将详细介绍 WebSocket 的概念、Django 的 WebSocket 支持以及如何利用它来创建动态、响应式的 Web 应用。 1. WebSocket 简介 1.1 什么是 WebSocket&#xff1f; 在 W…

阿里云Windows服务器怎么安装多个网站?

本文阿里云百科介绍如何在Windows Server 2012 R2 64位系统的ECS实例上使用IIS服务器搭建多个Web站点。本教程适用于熟悉Windows操作系统&#xff0c;希望合理利用资源、统一管理站点以提高运维效率的用户。比如&#xff0c;您可以在一台云服务器上配置多个不同分类的博客平台或…

前端跨域问题解决方法

跨域是WEB浏览器专有的同源限制访问策略。(后台接口调用和postman等工具会出现) 跨源资源共享&#xff08;CORS&#xff0c;或通俗地译为跨域资源共享&#xff09;是一种基于 HTTP 头的机制&#xff0c;该机制通过允许服务器标示除了它自己以外的其他源&#xff08;域、协议或端…

分类预测 | Matlab实现基于TSOA-CNN-GRU-Attention的数据分类预测

分类预测 | Matlab实现基于TSOA-CNN-GRU-Attention的数据分类预测 目录 分类预测 | Matlab实现基于TSOA-CNN-GRU-Attention的数据分类预测效果一览基本介绍研究内容程序设计参考资料 效果一览 基本介绍 Matlab实现分类预测 | Matlab实现基于TSOA-CNN-GRU-Attention的数据分类预…

Windows电脑快速搭建FTP服务教程

FTP介绍 FTP&#xff08;File Transfer Protocol&#xff09;是一种用于在计算机网络上进行文件传输的标准协议。它提供了一种可靠的、基于客户端-服务器模型的方式来将文件从一个主机传输到另一个主机。在本文中&#xff0c;我将详细介绍FTP的工作原理、数据传输模式以及常见…

FLatten Transformer 简化版Transformer

今天在找论文时&#xff0c;看到一篇比较新奇的论文&#xff0c;在这里跟大家分享一下&#xff0c;希望可以给一些人提供一些思路。虽然现在Transformer 比较火&#xff0c;在分割上面也应用的比较多&#xff0c;但是我一直不喜欢用&#xff0c;其中一个原因是结构太复杂了&…

【JavaWeb】MySQL基础操作

1 通用语法规则 SQL语句可以单行或者多行书写&#xff0c;以分号结尾SQL语句不区分大小写&#xff0c;关键字建议使用大写单行注释 --注释内容&#xff08;通用&#xff09; # 注释内容&#xff08;MySQL独有&#xff09;多行注释 /* 注释内容 */ 2 语句 数据库 -- 查…

OpenCV实例(八)车牌字符识别技术(一)模式识别

车牌字符识别技术&#xff08;一&#xff09;模式识别 1.模式识别流程2. 模式识别方式 影响并导致汽车牌照内字符出现缺损、污染、模糊等情况的常见因素有照相机的性能、采集车辆图像时光照的差异、汽车牌照的清洁度等。为了提高汽车牌照字符识别的准确率&#xff0c;本节将把英…

开发过程中遇到的问题以及解决方法

巩固基础&#xff0c;砥砺前行 。 只有不断重复&#xff0c;才能做到超越自己。 能坚持把简单的事情做到极致&#xff0c;也是不容易的。 开发过程中遇到的问题以及解决方法 简单易用的git命令 git命令&#xff1a; 查看有几个分支&#xff1a;git branch -a 切换分支&#…