一、前言
原文以及该系列后续文章请参考:安装Electron文章来源地址https://www.toymoban.com/news/detail-827294.html
随着前端的不断强盛,现在的前端已经不再满足于网页开发了,而是在尝试能否使用前端的开发逻辑来开发PC端的桌面软件。
即用html、js、css这三者来开发桌面软件。
本栏目所介绍的Electron框架就是这众多实践中目前成效最好的一个。
就连家喻户晓的QQ,目前也已经采用了这套框架重写。
其优点就在于:你只需要写一份代码,就能直接在linux、windows、mac这三个主流的操作系统上运行。
这可以极大减少程序员的工作量。
但缺点也是有的,那就是它底层采用的Chrome内核,简单直白的来说就是,你用Electron开发出来的一个软件,就相当于一个浏览器。
因此它的内存占用量、启动速度等等,相比于原生平台开发的软件都会差很多。
但总的来说,依旧是瑕不掩瑜,毕竟如今个人电脑运行速度越来越快,内存越来越大,只要优化的好,这些缺点都不会是问题。
比如著名的vscode就非常的强大!而它就是依靠Electron框架开发、不断优化而来的。
二、下载
其官网教程可以点击这里跳转。
简单来说就是,你要想使用这套框架,你就得先安装Node.js
,安装方法其实也很简单,前往官网下载安装即可:Node.js
一般下载长期支持版本:
从上图中的英文说明中也能看出它的作用,它是一个开源、跨平台、JavaScript的运行时环境。
更简单直白的来说,它就相当于一个没有窗口的浏览器,只不过比浏览器更强大,它可以让你使用js代码操作本地数据。
而在浏览器中,js代码只能用来控制html标签、或者收发网络请求等等操作。
下载安装完成之后,来到控制台,输入node -v
,如果能打印出版本号,就说明你已经安装成功了。
打印不出来,可以尝试重启一下电脑。
有了这个,下面我们就可以安装Electron
框架了,按照官方文档的指示,你需要先创建一个文件夹,然后用npm初始化这个文件夹:
mkdir my-electron-app && cd my-electron-app
npm init
mkdir
与cd
都是cmd
命令,前者用于创建文件夹,后者用于进入这个文件夹,中间的&&
用于两个命令分隔,为且
的意思。
也就是只有前者执行成功后,后面这个命令才会执行。
因此上面的
my-electron-app
只是一个文件夹的名称,可以自己随便取。
然后用npm init
来初始化这个文件夹。
npm
是你安装node时自带的一个包管理器,以后你下载其它第三方包,都可以用它来下载,这里的初始化,其实也就是在初始化一个包管理文件。
运行了它之后,会出现一系列让你选择的东西,可以直接一直按Enter
即可,全部默认,然后这个文件中就会出现一个叫做package.json
的文件。
这个文件就是npm
的包管理文件,
刚才在命令行让你填的内容,最终也会保存到这个文件中的,所以你可以直接修改这个文件即可。
上面的字段中:
-
name
:这个项目的名字(一般我们称开发一个软件的工程为项目),默认取的当前文件夹的名称(我取的就是test-ele
) -
version
:版本号 -
description
:描述信息,也就是这个软件是干嘛的,自己随便填 -
main
:这个就比较重要了,这是这个项目的入口文件,也就是代码将从哪个文件开始执行?其默认是index.js
。 -
scripts
:这个也比较重要,脚本执行的,比如上图中test
对应的后面一长串的东西,那么以后我就能直接运行npm run test
来代替运行后面那一长串的东西,可以让你后面执行的时候少敲一些键盘,而且也更容易记住。 -
author
:作者信息 -
license
:许可证,这个新手一般用不到,默认即可,除非你想要开源你的代码,那可以再自己研究研究。
上面的步骤仅仅只是完成了一个最基本的、基于node
的项目初始化步骤。
完成了基本的项目初始化之后,下面我们就可以开始安装electron
了。
按照官方的说法,你可以继续在命令行当前项目目录下,运行npm install --save-dev electron
命令来安装Electron
框架。
如果能安装成功自然最好,但很多人可能都会安装失败,因为我也安装失败了,所以可以替换为下面的方式。
运行下面这个命令,全局安装另一个包管理器cnpm
,并设置镜像网站(https://registry.npmmirror.com):
npm install -g cnpm --registry=https://registry.npmmirror.com
然后,用这个新安装的cnpm
包管理器来下载安装Electron
即可,速度非常快!
cnpm install --save-dev electron
安装完成后,当前目录下就又会多出一个文件夹:
node_modules
文件夹存放的就是我们下载后的包,所有下载的包都会被放在这个文件夹中。
并且此时我们的包管理文件会多出一个devDependenceies
的项,该项的作用就是记录我们当前这个项目用到了那些包。
比如这里由于前面我们在命令行中为本项目安装了electron,所以这里就将electron
写入其中了,并且后面还有对应使用的版本号。
除此之外,我还将原本的脚本命令test
改为了start
,并让其值为electron .
,这个命令就是electron
框架的运行命令,后面我们将直接使用npm run start
代替,可以方便使用。
至此,我们的Electron
就安装完成了!
三、简要总结
总的来说,上面这样的安装配置过程、乃至后文将要介绍的基本electron程序开发流程,都是一件非常繁琐的事情。
但我依旧还是推荐你挨着将其过一遍,因为这可以让你更好的理解electron的运行逻辑。
事实上在真正的项目开发时,我们并不需要手动执行这些过程,因为已经有相应的开源项目可以让我们免费使用了。
比如后续将要介绍的使用electron模板、或者直接使用vue开发electron。文章来源:https://www.toymoban.com/news/detail-827294.html
原文以及该系列后续文章请参考:安装Electron
到了这里,关于1.Electron初始与安装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!