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代码：

  1. const { app, BrowserWindow } = require('electron')
  2.  
  3. function createWindow () {
  4.   const win = new BrowserWindow({
  5.     width: 800,
  6.     height: 600,
  7.     webPreferences: {
  8.       nodeIntegration: true
  9.     }
  10.   })
  11.  
  12.   win.loadFile('index.html')
  13. }
  14.  
  15. app.whenReady().then(createWindow)
  16.  
  17. app.on('window-all-closed', () => {
  18.   if (process.platform !== 'darwin') {
  19.     app.quit()
  20.   }
  21. })
  22.  
  23. app.on('activate', () => {
  24.   if (BrowserWindow.getAllWindows().length === 0) {
  25.     createWindow()
  26.   }
  27. })

　　index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World!</title>
  6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7. </head>
  8. <body style="background: white;">
  9.     <h1>Hello World!</h1>
  10.     <p>
  11.         We are using node <script>document.write(process.versions.node)</script>,
  12.         Chrome <script>document.write(process.versions.chrome)</script>,
  13.         and Electron <script>document.write(process.versions.electron)</script>.
  14.     </p>
  15. </body>
  16. </html>

　　package.json

  1. {
  2.   "name": "my-electron-app",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "main.js",
  6.   "scripts": {
  7.     "start": "electron ."
  8.   },
  9.   "keywords": [],
  10.   "author": "",
  11.   "license": "ISC",
  12.   "devDependencies": {
  13.     "electron": "^11.2.2"
  14.   }
  15. }

　　启动：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. Spring 框架学习

    转载自前辈:我没有三个新脏 Spring学习(1)--快速入门 认识 Spring 框架 Spring 框架是 Java 应用最广的框架,它的成功来源于理念,而不是技术本身,它的理念包括 IoC (I ...

  2. 电脑日常使用bug记录

    1.由于电脑太卡了,于是决定关一点服务,一不小心,电脑无线无法使用了.启动无线服务时提示"windows无法启动wlan autoconfig服务错误1068依赖服务" 启动 Ex ...

  3. UE4蓝图AI角色制作(七)之追逐玩家

    15.追逐玩家 现在我们的AI无法做出任何决策,它总是执行相同的决策.我们先把感知系统中的相关信息提供给AI,让AI知道如何做出决策,然后我们会修改行为树.我们首先需要创建新的黑板键,这样我们就能在行 ...

  4. pycharm中的terminal和Windows命令提示符有什么区别？二者用pip安装的包是不是位于相同位置？

    那要看pycharm使用了什么shell,可以在设置->工具->终端里查看shell path.如果使用的是cmd.exe那就没区别.pycharm终端和Windows命令提示符用pip安 ...

  5. FastAPI 学习之路（五十四）startup 和 shutdown

    我们在实际的开发中呢,总会遇到这样的场景,我们想在启动或者终止的时候,做一些事情,那么应该如何实现呢,其实也是很简单.fastapi提供了这样的操作. 那么我们看下具体是怎么实现的呢 app = Fa ...

  6. the Agiles Scrum Meeting 11

    会议时间:2020.4.20 20:00 1.每个人的工作 在这次例会上,我们对上周完成的工作进行了总结. 本周已完成的工作 个人结对项目增量开发组 tq: 创建广播功能 修复纯英文数字可能溢出bug ...

  7. mongodb的索引操作

    在mongodb中,当我们一个集合中的数据量非常大时,比如几百万条数据,如果不使用索引,对数据的查询就会进行全表扫描,这个时候查询的速度就会非常的慢,此时我们就需要为集合建立上索引,从而加快查询的速度 ...

  8. Gitflow branch与Docker image tag命名冲突怎么办？

    谷歌还是比必应要好用一点. 在前公司,我根据主流的git flow 给团队搭建了一套devops流程,运行在 docker & k8s上. 在现代devops流程中,一般推荐使用git分支名或 ...

  9. P2774 方格取数问题（最小割）

    P2774 方格取数问题 一看题目便知是网络流,但由于无法建图.... 题目直说禁止那些条件,这导致我们直接建图做不到,既然如此,我们这是就要逆向思维,他禁止那些边,我们就连那些边. 我们将棋盘染色, ...

  10. 绝世好题（DP）

    题目链接:绝世好题 暴力就不用说了,和lis神似,O(n2)妥妥的挂掉,但可以得大部分分(好像是90,80)... 考虑优化,来一发非正解的优化: #include<bits/stdc++.h& ...