编写第一个eletron程序

1. 安装

npm install --save-dev electron

当你安装完electron后，你会发现你的项目目录下多了一个node_modules文件夹，里面有electron的相关文件。
在安装完之后，我们需要手动的去到package.json文件中添加一下启动的配置：

{"scripts": {"start": "electron ."}
}

完整的配置如下：

{"name": "my-electron-app", //我的项目名称"version": "1.0.0","main": "index.js", // 入口文件"scripts": {"start": "electron .",  // 启动脚本 "test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","description": "","devDependencies": {"electron": "^20.1.2"}
}

2. 创建一个简单的html页面并且用eletron打开

在项目任意一个目录下创建一个html文件：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>Hello World!</title></head><body><h1>Hello World!</h1>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.</body>
</html>

根据默认的入口文件配置，我们还需要在根目录下创建一个index.js文件，用来作为整个程序的启动文件

// 加载必要的模块
const {app, BrowserWindow} = require('electron')const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600})// 加载我们刚刚创建的html文件，由于我是在src目录下创建的，所以这边使用更多是相对路径win.loadFile('./src/index.html')
}app.whenReady().then(() => {// 创建窗口createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})

3. 运行

npm run start

此时就可以看到页面上显示出我们的第一个页面了

4. 打包

添加必要的依赖

npm install --save-dev @electron-forge/cli
npx electron-forge import

打包程序

npm run make

此时我们的程序就会出现在out目录下, 直接运行out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app就可以运行我们的程序了

Electron -- 编写第一个Eletron程序相关推荐

【（Python解释器、Pycharm）安装教程】【使用PyCharm编写第一个Python程序】
视频.源码.课件.软件.笔记:超全面Python基础入门教程[九天课程]博客笔记汇总表[黑马程序员] 目录 1.Python 解释器安装 1.1.手动配置环境变量步骤 2.PyCharm 程序 ...
用java编写一个图书管理系统_手把手教你编写第一个java程序
安装完jdk后我们就可以试着编写第一个java程序了,让我们一起来试试吧! 第一步点击开始--所有程序--附件--记事本,新建记事本,输入以下代码: class HelloWorld { publi ...
二.编写第一个c#程序（注释，命名空间，类，Main方法，标识符，关键字，输入，输出语句，）...
复习编写一个控制台应用程序,目标是在控制台输出"Hello World" 1.第一步,打开Visual Studio 2012以上版本(我用的是VS 2015),打开完成后出现以下 ...
编写第一个Java程序：helloworld
配置好java开发环境后,我们可以编写第一个java程序(helloworld). 在开始编写java程序时,我们要知道java程序开发的三个步骤:编写.编译.运行. 编写阶段主要是由程序员编写后缀为 ...
vs2008编写第一个Windows程序
vs2008编写第一个Windows程序我们编写单击MouseClick事件的处理程序,当鼠标单击窗体时,在窗体的标题栏显示"这是我的第一个Windows程序". 1.在窗体设计 ...
mac安装golang，编写第一个go程序
一:下载pkg包,官网经常打不开,这里从云盘中下载二:然后安装,一直next,命令行输入go version 或 go env如下说明成功三:编写第一个go程序,新建hellow.go文件 pac ...
《教我兄弟学Android逆向01 编写第一个Android程序》
前言之所以准备写这一系列逆向的教程是因为有一些同学私信我说自己想学习Android逆向但是不知道怎么去学习包括自己身边的一些计算机专业的同学在大学里面老师讲的那些东西要么是自己不感兴趣要么是自 ...
eclipse怎么编写java程序_简单使用Eclipse编写第一个Java程序
文章作者:姜南(Slyar)文章来源:Slyar Home (www.slyar.com) 转载请注明,谢谢合作. Eclipse是很常用的Java IDE,至少我们学校教Java都是用这个.下载就不 ...
用记事本编写第一个Java程序运行时出现报错：错误: 类helloworld是公共的, 应在名为 helloworld.java 的文件中声明 public class helloworld {
在书本上盲人摸象的摸索学习Java,Java环境配置完成,安装好eclipse后,便兴冲冲的去在记事本上编写第一个Java程序,结果给破了一盆冷水,略懵 public class helloworld ...

Electron -- 编写第一个Eletron程序