使用VSCode开发Electron的初步入门

1、创建项目文件夹

如我在E盘中创建了一个项目文件夹，路径为：E:\Net_项目管理\Net_测试项目\Net_ElectronByVSCode\Project1（项目文件夹路径中最好没有中文，我这里仅测试使用，你懂得），然后在该文件夹下新建一个app文件夹，用于存放你编写的相关代码，目的在于将代码和运行调试相关的环境和第三方包区分开来，方便项目维护；

2、创建并编辑package.json

创建package.json文件的方式可以是使用VSCode直接创建并编辑相关的属性，在这里我们介绍使用npm init来自动创建并初始化编辑该文件。

以管理员身份运行CMD，然后定位到项目文件夹位置E:\Net_项目管理\Net_测试项目\Net_ElectronByVSCode\Project1，然后输入命令cnpm init回车（这里需要注意的是cnpm而不是npm，因为我们这里使用的是国内淘宝的镜像，关于cnpm的配置，请参阅文章Windows中安装Electron说明），回车后，会让你依次输入相关的配置信息（输入完一个信息，回车即可），信息如下所示：

package name：项目名称，只能为小写，可用下划线连接，如这里我输入的是：el_test
version：版本号，默认为1.0.0，如果不想输入就直接回车
description：描述，输入项目的描述信息，如这里我输入的是：Electron的第一个测试项目
entry point：主程序入口文件，默认为index.js，这里我输入的是：./app/index.js，原因是在第一步的时候我们创建了一个app文件夹来专门放程序代码的
test command：
git repository：
keywords：
author：作者，这里我输入的是Quber
license：授权信息

在输入完license项后回车，会出现Is this OK?(yes)，然后继续回车即可创建完成package.json

3、安装Electron依赖环境

以管理员身份运行CMD，然后定位到项目文件夹位置E:\Net_项目管理\Net_测试项目\Net_ElectronByVSCode\Project1，然后输入命令cnpm install electron@^8.0.0（其中的@^8.0.0代表安装electron的版本号为8.0.0）回车。

在安装完成后，我们的项目文件夹中就会多一个文件夹node_modules，如下图所示：

到此，使用VSCode开发的Electron环境就搭建好了。

4、创建主入口程序index.js

打开VSCode，在app文件夹中创建index.js，然后在index.js文件中编写如下代码：

// ./app/index.js//采用javascript严格模式
'use strict';// 应用的控制模块
const electron = require('electron');
const app = electron.app;// 创建原生浏览器窗口的模块
const BrowserWindow = electron.BrowserWindow;
var mainWindow = null;// 当所有窗口都关闭的时候退出应用
app.on('window-all-closed', function () {if (process.platform != 'darwin') {app.quit();}
});// 当 Electron 结束的时候，这个方法将会生效
// 初始化并准备创建浏览器窗口
app.on('ready', function () {// 创建浏览器窗口.mainWindow = new BrowserWindow({ width: 800, height: 600 });// 载入应用的 index.htmlmainWindow.loadURL('file://' + __dirname + '/index.html');// 打开开发工具// mainWindow.openDevTools();// 窗口关闭时触发mainWindow.on('closed', function () {// 想要取消窗口对象的引用，如果你的应用支持多窗口，// 通常你需要将所有的窗口对象存储到一个数组中，// 在这个时候你应该删除相应的元素mainWindow = null;});
});

5、创建主窗体文件index.html

同样我们在app文件夹中创建index.html，然后在index.html文件中编写如下代码：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第一个测试的Electron项目</title><body><h1>Hello Electron！</h1><h1>你好，Electron！</h1><a href="javascript:;" onclick="alert('我是点击后弹出来的消息！');">点击我</a>
</body></html>

6、运行该应用

方式1：以管理员身份运行CMD，然后定位到项目文件夹位置E:\Net_项目管理\Net_测试项目\Net_ElectronByVSCode\Project1，然后输入命令electron .（需要注意的是该命令为electron+空格+.），运行命令和效果如下图所示：

方式2：可以使用gulp工具来运行该应用

首选应确保gulp已经安装，可以在cmd中输入命令gulp -v来查看安装的gulp版本，如果出现如下图所示的提示，则说明你电脑上还没有安装gulp工具

那么这时候我们就需要全局安装gulp工具，以管理员身份运行CMD，然后输入命令cnpm install -g gulp，出现下图所示则代表安装成功

安装完全局gulp工具后，还需要在每个使用gulp项目中单独安装一次，以管理员身份运行CMD，然后定位到项目文件夹位置E:\Net_项目管理\Net_测试项目\Net_ElectronByVSCode\Project1，然后输入命令cnpm install -save-dev gulp回车即可，如下图所示：

gulp安装完成后，我们通过VSCode在项目文件夹中创建gulpfile.js，然后就可以利用gulpfile.js来创建一个gulp task，gulpfile.js代码如下：

// 获取依赖
var gulp = require('gulp'),childProcess = require('child_process'),electron = require('electron');
// 创建 gulp 任务
gulp.task('run_ele', function () {childProcess.spawn(electron, ['.'], { stdio: 'inherit' });
});

以管理员身份运行CMD，然后定位到项目文件夹位置E:\Net_项目管理\Net_测试项目\Net_ElectronByVSCode\Project1，然后输入命令gulp run_ele（其中的run_ele就是gulpfile.js中的run_ele【任务名称】）回车即可，运行命令和效果如下图所示：

同时，我们也可以使用VSCode的快捷键命令来运行该应用，按下Ctrl+Shift+P，然后在输入框中输入run，然后在出现的下拉选项中选择“运行任务”，然后在接下来出现的下拉选项中选择gulp:run_ele，然后在接下来出现的下拉选项中选择“继续而不扫码任务输出”，到此就将改应用运行起来了，如下图所示：

这样运行运用是不是感觉还是有点麻烦？别急，我们可以配置Ctrl+Shift+B来自动运行应用，按下Ctrl+Shift+P，然后在输入框中输入task，在下拉选项中选择“配置默认生成任务”，然后在出现的下拉选项中选择“gulp:run_ele”，然后在项目文件夹中就生成了.vscode文件夹和tasks.json配置文件，这时候我们按下快捷键Ctrl+Shift+B即可马上运行该应用，就不用使用CMD来输入命令运行应用了，如下图所示：

使用VSCode开发Electron的初步入门相关推荐

VSCode开发.NETCore项目入门（1）设置中文语言环境
安装VSCode 最新地址:https://code.visualstudio.com/,下载后安装即可配置语言环境打开安装好的VSCode软件,可以看到刚刚安装的VSCode软件默认使用的是英文 ...
C语言初步入门学习大略
C语言的入门学 C语言初步入门 2022/11/29 01. 看前需知 02. 内容构成 03. 学习时间 04. 预定计划 05. 网站推荐 2022/12/01 01. 驱动程序是什么?和其他电脑 ...
VSCode + git代码托管：入门到实战
VSCode + git代码托管:入门到实战使用VSCode代码开发工具(IDE开发工具的一种),该代码开发软件功能,常用举例如下: 可以实现代码开发: 代码提示等等插件安装: Git代码托管:修改 ...
开发黑名单功能demo_突然让你开发Electron应用-electron特性练习操场-所见即所得的electron...
突然让你开发Electron应用,你能hold住吗? 如果领导突然说需要开发一款前端桌面端应用,那么对于我们前端er来说选择Electron是一件顺理成章的事情.但事实上很多同学对于Electron都 ...
ESP32开发 0.windows Vscode开发环境搭建，基于esp-idf-V4.2 | Cmake | Vscode插件
一前言入坑嵌入式以来,一直都在寻找一款通用MCU控制器:他应有优秀的计算处理能力.丰富的外设扩展能力.支持有线/无线联网.小巧的封装.自从ESP8266爆火以来,熟悉过它的使用,但窘于硬件限制,只 ...
初探Electron，从入门到实践
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在开始之前,我想您一定会有这样的困惑:标题里的Electron 是什么?Electron能做什么?许多伟大的 ...
三国杀开源系列之九-vscode调试electron
好久没填这个系列的坑了,最近有朋友问,所以就更一篇.主要内容是写vscode调试electron的方法. 这个noname的三国杀框架用js写的,没有任何参考文档,调试梳理代码非常麻烦.最开始使用了s ...
51单片机开发系列一-51单片机开发环境搭建以及入门汇编代码
51单片机开发系列一 51单片机开发环境搭建以及入门汇编代码象棋小子 1048272975 1. 51单片机概述 51单片机是对所有兼容Intel 8031指令系统的单片机的统称.目前教科书基 ...
51单片机开发环境配置(使用VScode开发)
前言工欲善其事,必先利其器,作为一个个单片机爱好者,相信大家入门的时候都是用的keil来开发,这个当然也可以,但是用的时间长了就发现这个开发效率真是慢呀.于是我就想能不能在vscode上开发单片机, ...
《计算机科学与工程导论：基于IoT和机器人的可视化编程实践方法第2版》一第2章机器人开发环境和VIPLE入门...
第2章机器人开发环境和VIPLE入门前面我们介绍了计算机领域的发展和职业选择可能,并且已经组建了团队,为我们的开发工作做好了准备.在正式开发之前,我们要先认识工作环境--VIPLE(Visual ...

使用VSCode开发Electron的初步入门

使用VSCode开发Electron的初步入门相关推荐

最新文章

热门文章