vscode+Electron环境搭建 helloword

2023-11-16

0.Electron是什么简介 | Electron

简单来说就是一个基于Chrome+Nodejs的容器,可以用纯前端的方式实现跨平台的桌面应用开发。代码由js,css,html构成,它支持把整个项目编译成exe。由于它支持Nodejs,所以可以引用dll,那么技术上涉及到跟硬件打交道的事情可以用c#,c++来开发,做成dll再有Nodejs去调用。所以我们可以把electron当作一个快速开发业务逻辑和界面逻辑的手段。底层核心可以用c++做,大大提高了开发效率。

1.下载nodejs  64位

Download | Node.js

安装好后,cmd输入  node -V查看到版本说明安装好了。

 

2.安装vscode

这个没啥好说的,直接安装Visual Studio Code - Code Editing. Redefined

3.创建项目文件夹

创建一个空的项目文件夹,我用的这个D:\codes\myCode\Electron-test

在文件夹下新增一个app文件夹用于存放代码

4.下载安装electron

在D:\codes\myCode\Electron-test路径下以管理员身份运行cmd

设置npm使用淘宝镜像

npm install cnpm -g  --registry=https://registry.npm.taobao.org

 安装electron

在D:\codes\myCode\Electron-test路径下输入

cnpm install electron --save-dev

完成后查看electron版本

npx electron -v 

 

此时项目文件夹里面会多出一个node_modules文件夹和package.json文件

 

 5.初始化项目

在vscode中,在项目根目录创建一个package.json空白文件

 在vscode中,选择“终端”-->"新建终端"

vscode下方会出现终端,这个“终端”其实就是cmd。 

在项目文件夹下  D:\codes\myCode\Electron-test    “终端”输入cnpm init 对项目进行配置

 cnpm init后会逐条让输入 package name(项目名称),version(版本号),description(项目描述),entry point(项目启动的js位置)其他的都用管了,直接回车。最后会问自动生成的文件你是否ok,ok输入yes他就自动生成package.json文件内容。

生成好了结果如下:

 6.创建主程序入口index.js

在app文件夹下面创建index.js 里的代码如下:

// ./app/index.js
 
//采用javascript严格模式
'use strict';
 
// 应用的控制模块
const electron = require('electron');
const app = electron.app;
 
// 创建原生浏览器窗口的模块
const BrowserWindow = electron.BrowserWindow;
var mainWindow = null;
 
// 当所有窗口都关闭的时候退出应用
app.on('window-all-closed', function () {
    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();
 
    // 窗口关闭时触发
    mainWindow.on('closed', function () {
        // 想要取消窗口对象的引用,如果你的应用支持多窗口,
        // 通常你需要将所有的窗口对象存储到一个数组中,
        // 在这个时候你应该删除相应的元素
        mainWindow = null;
    });
});

 7.创建主窗体index.html

在app文件夹中创建index.html,代码如下

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Word</title>
 
<body>
    <h1>Hello Word!</h1>
    <h1>Hello,Electron!</h1>
    <div style="width: 200px; height:40px; background-color: bisque;">
        你好我的朋友!
    </div>
</body>
 
</html>

8.编译运行

安装gulp。

命令cnpm install -save-dev gulp

 安装好后,在项目根目录下创建一个gulpfile.js文件,其代码如下:

// 获取依赖
var gulp = require('gulp'),
    childProcess = require('child_process'),
    electron = require('electron');
// 创建 gulp 任务
gulp.task('run_Electron-test', function () {
    childProcess.spawn(electron, ['.'], { stdio: 'inherit' });
});

命令输入  gulp run_Electron-test

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vscode+Electron环境搭建 helloword 的相关文章

  • 如何将原始二进制数据转换为 blob 并将其显示在 img 标记中?

    我正在 Electron 和 Svelte 中制作梦想日记应用程序 我有一种自定义文件格式 其中包含标题 描述和一张或多张图像 看 程序输入 文件输出 当我需要的时候 我可以打电话ipcRenderer invoke 在主进程中读取文件 然
  • 电子如何创建增量文件

    I use electron builder构建我的应用程序并成功构建第一个版本 其中包含三个输出 foosetup exe foo 0 0 1 full nupkg 和 RELEASES 现在我想实现自动更新 并且我已经部署了后端服务通过
  • 节点模块是针对不同的节点模块编译的 67

    我有一个在节点模块版本 67 下编译的节点项目 但现在我收到一个错误 它需要节点模块版本 69 usb bindings node was compiled against a different Node js version using
  • 无法在电子js中加载反应

    这是我的 package js 文件 name cabed version 0 1 0 private false dependencies testing library jest dom 5 16 5 testing library r
  • 无法启动 Electron 应用程序 - 缺少 package.json

    我目前正在做一个 Python 项目 我想在 Electron 应用程序中显示我的结果 我在 YouTube 上看过一个关于如何在 Mac 上设置 Electron 的演示视频 该视频展示了在终端中执行的 3 个简单步骤 git clone
  • 电子关闭按钮不起作用

    我正在尝试使用 Electron 以前称为 Atom Shell 创建一个应用程序 该应用程序包装了 AngularJS 应用程序 并与在 Node js 中创建的端点交互以编辑和保存 HTML 内容 我能够毫无问题地创建应用程序 当我尝试
  • Electron打包后不支持ES6

    我正在使用各种ES6语法 http es6 features org 例如importETC React https reactjs org code JSX https reactjs org docs introducing jsx h
  • CSS“ch”单元的意外行为

    我正在使用ch用于指定宽度的 CSS 单位div包含文本 我使用的是等宽字体 但是 如果我设置width 80ch 我第一个得到 80 个字符n行 其中n始终是 24 不确定这是否重要 但从那时起只有 79 个字符 这如下面的屏幕截图所示
  • Electron Web 蓝牙 API requestDevice() 错误

    我正在尝试开发一个与蓝牙低功耗设备通信的应用程序 我使用 Web Bluetooth API 建立了一个工作 网站 一切正常 所以我使用 Electron 框架来构建一个应用程序 这个问题是已知的 如果你开始navigator blueto
  • Electron如何拦截http响应体

    有什么办法可以拦截BrowserWindow主进程中的http响应主体没有调试器 是否无法使用WebRequest类和onCompleted method 我可以使用调试器做到这一点 但由于某种原因我不能使用它 await w webCon
  • 如何使用新的 html 文件打开更新电子浏览器窗口

    我是电子新手 我有两个 html 页面 我想在单击按钮时打开第二个页面 我的代码如下 但我只是得到一个空白窗口 不是第二页 这是index js const electron require electron const app Brows
  • Electron 为触摸屏启用触摸事件

    我有一个连接到触摸屏的 Raspberry Pi 并通过 startx 命令在其上运行电子应用程序 startx electron app nocursor 我无法处理触摸事件 例如 touchstart touchend 的问题 显然这是
  • Electron 应用程序可以与 java 代码集成吗?

    由于node js仍然缺乏Java中存在的重要功能 因此我想使用Java而不是node js 并使用Web语言 html js css 创建客户端 Electron 是跨平台的 java 也是跨平台的 因此似乎有一个能够两全其美的解决方案
  • 通过键盘快捷键电子应用程序禁用重新加载

    我想实现一个绑定到的自定义操作Command R电子应用程序中的键盘快捷键 我克隆了electron quick start回购 并改变了main js文件到此 const app Menu MenuItem BrowserWindow r
  • 无法通过电子应用程序在discordjs上发送附加到消息的图像

    我正在尝试为我使用discordjs 编写的discord 机器人构建图形界面 但是 我在发送图像时遇到了问题 这是我的代码中负责向用户发送消息的部分 utilsateur createDM then channeltemp gt let
  • 电子应用程序可以播放本地支持的任何视频吗?

    我知道浏览器通常会限制玩家mp4 and webm类型的媒体 但我想知道基于电子的应用程序是否可以运行 MKV 和 AVI 等格式的本地视频 我找不到明确的来源来告诉我什么是可用的 什么是不可用的 Electron 仍然仅限于网络技术 这意
  • ElectronJS ReferenceError:导航器未定义

    我正在尝试在电子上制作自定义标题栏 但是当我启动我的应用程序时 我遇到了 ReferenceError 导航器未定义 问题 请帮忙 这是我的 main js 中的代码片段 My Codes https i stack imgur com c
  • 如何在 Electron 应用程序上获得圆角?

    我目前正在尝试在我正在制作的电子应用程序上获得圆角 我已经尝试了目前在线提供的几乎所有解决方案 但没有一个有任何区别 如何让 Electron 应用程序变得圆润 制作无框透明窗 const myWindow new BrowserWindo
  • process.stdout.on( 'data', ... ) 和 process.stderr.on( 'data', ... ) 的顺序

    我正在编写一个电子应用程序 该应用程序处理从电子内部执行的终端命令 我在执行时遇到了麻烦npm ls命令 从 cli 运行它时 依赖关系树会打印到 stdout 最后可能会出现一些来自 stderr 的警告 请参阅下面的屏幕截图 正确输出
  • Electron - 如何使用主进程和渲染进程

    此时 经过大量研究和谷歌搜索 我了解了 main 和 renderer 的作用 以及它们在 Electron 应用程序中的重要性 然而 我在这里向所有有知识的人发出我的请求 请给我一个机会clear解释如何在我的应用程序中具体实现这一点 我

随机推荐

  • Gateway配合sentinel自定义限流_Spring Cloud Gateway 扩展支持动态限流

    之前分享过 一篇 限流实现 核心是依赖Spring Cloud Gateway 默认提供的限流过滤器来实现 原生RequestRateLimiter 的不足 配置方式 RequestRateLimiterGatewayFilterFacto
  • react+ts+vite从0搭建项目

    一 创建项目 1 创建一个基础项目 npm create vite latest 项目名 template react ts eg 输入命令后需要回答几个问题 按照自己需求选择即可 此处选择react ts 2 格式化代码的配置 a vsc
  • 京东、阿里、小米IoT平台设备接入对比分析

    概述 京东 阿里 小米都在积极布局物联网 智能家居方向 经过几年的运营和积累 各家平台接入了不同产品 形成了各自的发展模式 本报告从平台设备的视角 通过分析各平台设备接入情况 对比已接入的设备品类 摸清平台的布局 分析各平台优劣势 为物联网
  • 车载以太网工具链

    一 什么是车载以太网 随着近年汽车电子的快速发展 车内ECU数量的持续增加 带宽需求也随之不断增长 对此 汽车制造商的电子系统 线束系统等成本也在提高 而相比于传统总线技术 车载以太网不仅可以满足汽车制造商对带宽的需求 同时还能降低车内的网
  • 2.树莓派上程序自启动方式总结(带桌面)

    在树莓派上设置程序上电自动启动的几种方法 1 在pi config中新建autostart文件夹 在下面新建 desktop后缀的文件 具体方式问度娘 忘了 2 在pi文件夹下 修改 bashrc和 profile文件 比如直接运行py文件
  • 图像基本变换---图像二值化(包含OSTU/迭代法/统计法/双峰法/P分位法/最大熵法)

    OSTU法图像二值化 算法说明 Ostu法又叫做最大类间方差法 是一种常用的图像分割算法 基本算法思想是根据初始阈值把图像分为两类 然后计算两类之间的方差 更新阈值 重新计算类间方差 当满足类间方差最大时的阈值 即为所求最佳阈值 具体过程如
  • mybatis中关于example类详解mybatis的Example[Criteria]的使用

    一 什么是example类 mybatis generator会为每个字段产生如上的Criterion 如果表的字段比较多 产生的Example类会十分庞大 理论上通过example类可以构造你想到的任何筛选条件 在mybatis gene
  • 基于Pygame框架的交通导流可视化模拟

    目录标题 项目介绍 项目要求 关键技术 项目核心功能 代码 参考资料 源码下载地址 https download csdn net download david2000999 85627883 项目介绍 本项目根据以下项目要求完成的一个py
  • 软件测试大总结

    目录 一 基本内容 二 软件开发的五大模型 1 瀑布模型 2 螺旋模型 3 增量模型 4 迭代模型 5 敏捷模型 三 敏捷模型中的模型 1 V模型 2 W模型 四 测试用例的设计方法 五 测试分类 1 按测试对象划分 2 按照是否可以查看代
  • 【MySQL索引】提高查询速度和效率

    1 认识索引 假设现在大家要去 MySQL 书中找索引的内容 大家应该不会拿着 MySQL 的书一张一张去找 而是会看MySQL 书的目录 然后通过目录找到索引对应的页码 再去对应的页码中查看索引的内容 索引的优点 索引就相当于书的目录 运
  • 命令行操作MySQL - 调整列的完整性约束

    这是命令行操作MySQL数据库系列博客的第十一篇 今天这篇博客记录如何 调整列的完整性约束 调整 主键 外键 非空 唯一 自增长和默认值约束 一 主键PK 外键FK和 唯一键UK 查询键的别名 show index 或 keys from
  • 关系型数据库连接表的几种方式

    一 SQL 左外连接 右外连接 全连接 内连接 内连接 a表 id name 1 张3 2 李四 3 王武 b表 id job parent id 1 23 1 2 34 2 3 34 4 a id同parent id 存在关系 内连接 i
  • 设置最小值_allegro软件的绝对传输延迟是什么,绝对传输延迟应该怎么设置呢...

    标题 allegro软件的绝对传输延迟是什么 绝对传输延迟应该怎么设置呢 我们在用allegro进行PCB设计完成以后 都需要对一组传输的总线进行时序等长 在做时序等长的时候 分为绝对传输延迟与相对传输延迟 绝对传输延迟 顾名思义 信号传输
  • 洛谷 P1026 [NOIP2001 提高组] 统计单词个数

    题目描述 给出一个长度不超过 200 的由小写英文字母组成的字母串 该字串以每行 20 个字母的方式输入 且保证每行一定为 20 个 要求将此字母串分成 k 份 且每份中包含的单词个数加起来总数最大 每份中包含的单词可以部分重叠 当选用一个
  • 从图片中完整切除圆形物体 opencv+python

    面临一个任务就是要图片中的圆形物体切出来 然后做异常点检测 就是看那些圆形物体是异常点 因为异常点检测的方法还在摸索 现在就先把从图片中把圆形物体完整切出的方法写出来 1 首先图片是这样的 圆形物体非常多 2 接下来就是代码部分 impor
  • Pycharm中的常用快捷方式

    最重要的快捷键 ctrl shift A 万能命令行 shift两次 查看资源文件 新建工程第一步操作 module设置把空包分层去掉 compact empty middle package 设置当前的工程是utf 8 设置的Editor
  • 关于OCA,OCP,OCM认证的的区别

    可能大家知道OCA OCP OCM的关系是一个比一个难考 一个比一个含金量高 但是你知道具体的考试科目 考试方式 就业形势区别吗 不知道的话这篇通俗易懂的文章会让你一目了然 区别一 含金量 OCA 数据库专业人员踏上Oracle数据库认证之
  • MySQL数据库入门超级详细教程

    文章目录 MySQL 1 数据库软件安装 2 为什么要用数据库 3 什么是数据库 4 数据库管理系统 DBMS 5 MySQL 介绍 6 SQL 6 1 SQL 语句概述 6 2 SQL 基本操作 7 表结构操作 7 1 创建数据表 7 2
  • Windows10系统下彻底删除卸载MySQL

    本文介绍 在Windows10系统下 如何彻底删除卸载MySQL 1 停止MySQL服务 开始 所有应用 Windows管理工具 服务 将MySQL服务停止 2 卸载mysql server 控制面板 所有控制面板项 程序和功能 将mysq
  • vscode+Electron环境搭建 helloword

    0 Electron是什么简介 Electron 简单来说就是一个基于Chrome Nodejs的容器 可以用纯前端的方式实现跨平台的桌面应用开发 代码由js css html构成 它支持把整个项目编译成exe 由于它支持Nodejs 所以