node -v

npm -v

安装node环境

my-electron-app/

├── package.json

├── main.js

└── index.html

为您的项目创建一个文件夹并安装 Electron:

mkdir my-electron-app && cd my-electron-app

npm init -y

npm i --save-dev electron

main.js代码:

const { app, BrowserWindow } = require('electron')

function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
}) win.loadFile('index.html')
} app.whenReady().then(createWindow) app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
}) app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})

  index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello World!</h1>
<p>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</p>
</body>
</html>

  package.json

{
"name": "my-electron-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^11.2.2"
}
}

  启动:npm start 命令行

Electron快速入门的更多相关文章

  1. Electron快速入门之事件

    const { app, BrowserWindow } = require('electron') function createWindow () {   const win = new Brow ...

  2. Electron快速入门之debug

    view->toggleDevelpper Tools 本地桌面调试 浏览器debug "start": "electron --inspect=5858 .&qu ...

  3. Electron 快速入门

    https://www.w3cschool.cn/electronmanual/p9al1qkx.html

  4. [易学易懂系列|rustlang语言|零基础|快速入门|(11)|Structs结构体]

    [易学易懂系列|rustlang语言|零基础|快速入门|(11)] 有意思的基础知识 Structs 我们今天来看看数据结构:structs. 简单来说,structs,就是用来封装相关数据的一种数据 ...

  5. Web Api 入门实战 (快速入门+工具使用+不依赖IIS)

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  6. SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  7. 前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令(2)

    今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...

  8. 【第三篇】ASP.NET MVC快速入门之安全策略(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  9. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

随机推荐

  1. dubbo服务架构介绍

    Provider: 暴露服务的服务提供方. Consumer: 调用远程服务的服务消费方. Registry: 服务注册与发现的注册中心. Monitor: 统计服务的调用次数和调用时间的监控中心. ...

  2. 【Python】 第三周:基本数据类型

    整数 python整数无限制 二进制:以0b或者0B开头,例如: 0b010,-0B101 八进制:以0o或者0O开头,例如:0o123,-0O456 浮点数 浮点数间运算存在不确定尾数,不是bug ...

  3. C chdir函数

    chdir微软官方文档 在制作小游戏时遇到的问题:图片音频等资源文件太多,和exe同一个目录不方便集中管理 整理方案1 首先创建了一个名为"resource"的文件夹,把程序执行过 ...

  4. 使用YApi搭建API接口管理工具(docker安装)

    使用YApi搭建API接口管理工具(docker安装) 工具描述 YApi 是高效.易用.功能强大的 api 管理平台,旨在为开发.产品.测试人员提供更优雅的接口管理服务.可以帮助开发者轻松创建.发布 ...

  5. JVM详解(六)——对象的实例化、内存布局与访问定位

    一.对象的实例化 1.创建对象的方式 2.创建对象的步骤 脑图:https://www.processon.com/view/link/61701a927d9c087040525226 3.对象属性赋 ...

  6. 整理一下在 npmjs.com 上面发布资源包踩过的坑

    正常流程就不说了,网上有很多,比如写代码.打包.注册.登录.发布等. 邮箱要激活 在 npmjs.com 上面注册账号的时候需要填写邮箱,然后登录网址的时候并没有强制要求你去邮箱激活. 但是到了发布资 ...

  7. Idea Maven auto Import

  8. 欧姆龙plc通讯协议格式

    欧姆龙CPM1A型plc与上位计算机通信的顺序是上位机先发出命令信息给PLC,PLC返回响应信息给上位 机.每次通信发送/接受的一组数据称为一"帧".帧由少于131个字符的数据构成 ...

  9. Scrum Meeting 最终总结

    [软工小白菜]Scrum Meeting 最终总结 2020/4/28 一.会议内容 1.工作及计划 组员代号 完成的工作 明日计划 炎龙 1.整合了整个程序,生成了apk并且上传审核 无 风鹰 1. ...

  10. [no_code]OCR表格处理——技术规格说明书

    项目 内容 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 技术规格说明书 我们在这个课程的目标是 远程协同工作,采用最新技术开发软件 这个作业在哪个具体方面 ...