electron教程(一): electron的安装和项目的创建
我的electron教程系列
electron教程(一): electron的安装和项目的创建
electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范
electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint
electron教程(二): http服务器, ws服务器, 子进程管理
electron教程(三): 使用ffi-napi引入C++的dll
electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)
一. 安装
1.安装node.js
推荐下载LTS版本(当前为10.16.3), 默认安装即可.
2.安装yarn
以管理员模式启动cmd, 执行指令:
npm install yarn -g
根据官网介绍, Yarn 对你的代码来说是一个包管理器, 你可以通过它使用全世界开发者的代码, 或者分享自己的代码。Yarn 做这些快捷、安全、可靠,所以你不用担心什么。
在这里, 我们使用yarn来代替默认的npm包管理器
注: 从这一步开始, 任何一步指令执行完成后, 都需要仔细查看cmd窗口中打印的日志.
日志中会有一些关键的提示, 比如在你执行yarn add xxx 或npm install xxx之后, 打印了如下日志
added 253 packages from 162 contributors and audited 1117 packages in 42.157s
found 5 vulnerabilities (1 low, 4 high)
run `npm audit fix` to fix them, or `npm audit` for details html
就是要求用户执行npm audit fix
指令, 用于检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖,而不必再自己进行跟踪和修复。
在接下来的教程中, 读者需要仔细观察每一个步骤的日志, 及时进行修复, 本文将不再反复提醒.
3.安装编译环境
在cmd中, 执行指令:
npm install -g windows-build-tools
这个步骤将安装python2.7和msbuild等内容.
4.设置环境变量
在cmd中, 执行指令:
npm config set python python2.7
npm config set msvs_version 2017
第一句指令, 指定了使用python2.7作为编译环境(在上一步中已经安装), electron并不支持python3.x.
在指定了环境变量之后, 用户不需要将本机中其他python卸载.
第二句指令, 指定了使用项目使用的msvs版本.
如果你的电脑中安装了VS, 需要把VS的MSBuild.exe添加到环境变量中, 具体步骤为:
右键我的电脑->属性->高级系统设置->环境变量->系统变量->编辑->新建->添加vs的MSBuild.exe目录:
"你的vs安装目录"\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin
5.创建项目目录
新建一个文件夹, 作为你的项目根目录. 目录和路径务必不要使用任何中文, 也尽量不要出现空格.
在cmd窗口中, 使用cd命令, 将当前目录更改为项目根目录.
6.创建项目
执行指令:
npm init -y
这一步我们使用npm初始化了项目, 并自动在项目根目录建立了一个package.json文件, 这里我们暂时不管这个文件, 稍后再对它进行配置.
7.安装electron
执行指令:
yarn add electron@latest --save-dev
这个指令将在你的项目中,安装electron的最新版.
如果你想要安装其他版本的electron, 就把latest修改为对应的版本号,如electron@5.0.6或electron@beta
8.修改package.json
推荐使用vscode进行编辑.
内容如下:
{
"name": "blogs",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ./src/main.js"
},
"keywords": [],
"author": "Silenzio",
"license": "ISC",
"devDependencies": {
"electron": "^6.0.10"
}
}
我已经在package.json中添加了一些内容:
"start": "electron ./src/main.js"
指定了一个启动脚本, 之后可以通过这个脚本来启动你的程序, 它将用electron来启动src目录
下的main.js
.
还可以看到"devDependencies"
中有一项"electron": ^6.0.10
这里罗列出了你安装的模块, 以及对应的版本. 当你使用yarn add
或npm install
安装模块后, 这里将自动更新.
9.添加main.js
在上一步中, 我们在package.js中指定了项目启动入口: ./src/main.js.
下面我们创建这个文件, 并添加内容:
在项目根目录下, 新建一个src目录,用于存放源码, 在src目录下, 创建main.js文件.
添加如下内容:
// /////////////////////////////////////////////////////////////////////////
// electron
const {app, BrowserWindow} = require('electron');
// 保持对window对象的全局引用,如果不这么做的话,当JavaScript对象被
// 垃圾回收的时候,window对象将会自动的关闭
let win;
/**
*
*/
function createWindow() {
// 创建浏览器窗口。
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
// 加载index.html文件
win.loadFile('../html/index.html');
// 打开开发者工具
// win.webContents.openDevTools();
// 当 window 被关闭,这个事件会被触发。
win.on('closed', () => {
// 取消引用 window 对象,如果你的应用支持多窗口的话,
// 通常会把多个 window 对象存放在一个数组里面,
// 与此同时,你应该删除相应的元素。
win = null;
});
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 在macOS上,当单击dock图标并且没有其他窗口打开时,
// 通常在应用程序中重新创建一个窗口。
if (win === null) {
createWindow();
}
});
// 在这个文件中,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入。
// ////////////////////////////////////////////////////////
10.添加index.html
在上一步的main.js中, 我们指定加载了一个html文件, 这个html文件, 就是程序的主页面.
在项目根目录下, 新建一个html目录,用于存放与前端有关的内容, 在html目录下, 创建index.html文件.
添加如下内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
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>.
</body>
</html>
11.启动!
在前面几步中,我们依次完成了项目的创建、初始化、electron安装、添加三个必要文件(即package.json、main.js和index.html).
现在, 我们终于可以启动我们的electron程序了!
确保你的工作目录为项目根目录, 并执行指令:
npm start
程序已启动!
桌面上启动了一个独立的程序, 界面的左边显示的是渲染后的index.html, 而界面的右面其实是Chrome/Chromium浏览器的开发者选项(F12).
如果不需要开发者选项来进行调试的话, 只需要将main.js中的win.webContents.openDevTools()
注释掉,再次通过npm start
来启动我们的程序.
现在, 你可以通过修改index.html, 来给程序的主界面添加一些新元素了.
electron教程(一): electron的安装和项目的创建的更多相关文章
- electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(三): ...
- electron教程(三): 使用ffi-napi引入C++的dll
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...
- electron教程(二): http服务器, ws服务器, 进程管理
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...
- electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...
- electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...
- Electron – 基础学习(1): 环境安装、创建项目及入门
这几天到年底了,公司也没啥事,闲着就到处瞅瞅.记得上一家公司的时候用 Electron+ng1 写过项目,只是那个时候项目框架都是别人搭的,自己只负责写功能,对Electron没啥认识. 这几天想着反 ...
- 【Electron】Electron开发入门(五):项目打包
一.安装 electron-packager PS:安装之前,先复制一份package.json文件到./app目录下,然后改下./app目录下package.json里 "main&quo ...
- 第二章 你第首个Electron应用 | Electron in Action(中译)
本章主要内容 构建并启动Electron应用 生成package.json,配置成Electron应用 在你的项目中包含预先构建Electron版本 配置package.json以启动主进程 从主进程 ...
- Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用
基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3laye ...
随机推荐
- 持续集成高级篇之Jenkins Pipeline git拉取
系列目录 PipeLine中拉取远程git仓库 前面讲自由式任务的时候,我们可以看到通过自由式job里提供的图形界面配置git拉取非常方便的,实际上使用PipeLine也并不复杂.这一节我们展示一下如 ...
- 1026-windy数+数位DP+记忆化搜索
1026: [SCOI2009]windy数 题意:数位DP模板题: 目前只理解了记忆化搜索,就想练练手, ------给递推写法留一个位子 ------ 注意这道题要判断前导0的情况,1 )可以加一 ...
- 2019 Multi-University Training Contest 5
2019 Multi-University Training Contest 5 A. fraction upsolved 题意 输入 \(x,p\),输出最小的 \(b\) 使得 \(bx\%p&l ...
- 模板汇总——treap
1. 旋转treap. 思想:一颗权值BST + 一颗 随机数 最小堆. BZOJ - 3224 代码: #include<bits/stdc++.h> using namespace s ...
- CF1072A Palindromic Twist 思维
Palindromic Twist time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- 染色 Wannafly挑战赛20 A 思维
链接:https://www.nowcoder.com/acm/contest/133/A来源:牛客网 现在有一棵被Samsara-Karma染了k种颜色的树,每种颜色有着不同的价值 Applese觉 ...
- Period UVALive - 3026
For each prefix of a given string S with N characters (each character has an ASCII code between 97 a ...
- hdu 6435 CSGO
题意:现在有n个主武器, m个副武器, 你要选择1个主武器,1个副武器, 使得 题目给定的那个式子最大. 题解:这个题目困难的地方就在于有绝对值,| a - b | 我们将绝对值去掉之后 他的值就为 ...
- 【Distributed】缓存技术
一.缓存概述 1.1 缓存技术分类 1.2 缓存框架分类 1.3 Session理解的误区 二.基于Map集合实现本地缓存 2.1 定义Map缓存工具类 2.2 使用案例 三.Ehcache 缓存框架 ...
- 【Offer】[10-1] 【斐波那契数列】
题目描述 思路分析 Java代码 代码链接 题目描述  大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). 思路分析 递归的思路,会出现很多重复的 ...