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. 洛谷1429 平面最近点对(KDTree)

    qwq(明明可以直接分治过掉的) 但是还是当作联系了 首先,对于这种点的题,很显然的套路,我们要维护一个子树\(mx[i],mn[i]\)分别表示每个维度的最大值和最小值 (这里有一个要注意的东西!就 ...

  2. Java(27)集合二List

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15228435.html 博客主页:https://www.cnblogs.com/testero ...

  3. python jinja2初见

    吸取了长城杯的教训,学习python-web迫在眉睫. 正常难度的python_template_injection,由于现在没学面向对象,理解原理比较困难,所以先使用简单版复现:并附上正常版的常用p ...

  4. Codeforces Round #750 (Div. 2)

    Codeforces Round #750 (Div. 2) A. Luntik and Concerts 思路分析: 首先我们可以肯定的是a,b,c都大于等于1,所以我们先让它们自己抵消自己,最后a ...

  5. AtCoder Beginner Contest 223

    AtCoder Beginner Contest 223 A是纯纯的水题,就不说了 B - String Shifting 思路分析 我真的sb,一开始想了好久是不是和全排列有关,然后读了好几遍题目也 ...

  6. UltraSoft - Beta - Scrum Meeting 9

    Date: May 25th, 2020. Scrum 情况汇报 进度情况 组员 负责 今日进度 q2l PM.后端 记录Scrum Meeting Liuzh 前端 用户忘记密码界面初稿完成 Kkk ...

  7. Spring 5 中函数式web开发中的swagger文档

    Spring 5 中一个非常重要的更新就是增加了响应式web开发WebFlux,并且推荐使用函数式风格(RouterFunction和 HandlerFunction)来开发WebFlux.对于之前主 ...

  8. 常用JAVA API :HashSet 和 TreeSet

    set容器的特点是不包含重复元素,也就是说自动去重. HashSet HashSet基于哈希表实现,无序. add(E e)//如果容器中不包含此元素,则添加. clear()//清空 contain ...

  9. linux rtl8188eu ap模式 密码错误 disassoc&#160;reason&#160;code(8)

    2018-05-30 14:12:46 于深圳南山科技园 最近有个项目,客户需要通过手机app通过机器wifi热点连接,从而实现对机器的设置及视频的实时预览等各种功能.这两天一直在搞rtl8188eu ...

  10. GoLang设计模式13 - 观察者模式

    观察者模式是一种行为型设计模式.这种模式允许一个实例(可以称为目标对象)发布各种事件(event)给其他实例(观察者).这些观察者会对目标对象进行订阅,这样每当目标对象发生变化时,观察者就会收到事件( ...