1.Electron初始与安装

这篇具有很好参考价值的文章主要介绍了1.Electron初始与安装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、前言

原文以及该系列后续文章请参考:安装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

一般下载长期支持版本:

1.Electron初始与安装,electron,javascript,前端

从上图中的英文说明中也能看出它的作用,它是一个开源跨平台JavaScript的运行时环境。

更简单直白的来说,它就相当于一个没有窗口的浏览器,只不过比浏览器更强大,它可以让你使用js代码操作本地数据。

而在浏览器中,js代码只能用来控制html标签、或者收发网络请求等等操作。

下载安装完成之后,来到控制台,输入node -v,如果能打印出版本号,就说明你已经安装成功了。

1.Electron初始与安装,electron,javascript,前端

打印不出来,可以尝试重启一下电脑。

有了这个,下面我们就可以安装Electron框架了,按照官方文档的指示,你需要先创建一个文件夹,然后用npm初始化这个文件夹:

mkdir my-electron-app && cd my-electron-app
npm init

mkdircd都是cmd命令,前者用于创建文件夹,后者用于进入这个文件夹,中间的&&用于两个命令分隔,为的意思。

也就是只有前者执行成功后,后面这个命令才会执行。

因此上面的my-electron-app只是一个文件夹的名称,可以自己随便取。

然后用npm init来初始化这个文件夹。

npm是你安装node时自带的一个包管理器,以后你下载其它第三方包,都可以用它来下载,这里的初始化,其实也就是在初始化一个包管理文件。

运行了它之后,会出现一系列让你选择的东西,可以直接一直按Enter即可,全部默认,然后这个文件中就会出现一个叫做package.json的文件。

这个文件就是npm的包管理文件,

1.Electron初始与安装,electron,javascript,前端

刚才在命令行让你填的内容,最终也会保存到这个文件中的,所以你可以直接修改这个文件即可。

上面的字段中:

  • 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

安装完成后,当前目录下就又会多出一个文件夹:

1.Electron初始与安装,electron,javascript,前端

node_modules文件夹存放的就是我们下载后的包,所有下载的包都会被放在这个文件夹中。

并且此时我们的包管理文件会多出一个devDependenceies的项,该项的作用就是记录我们当前这个项目用到了那些包。

比如这里由于前面我们在命令行中为本项目安装了electron,所以这里就将electron写入其中了,并且后面还有对应使用的版本号。

除此之外,我还将原本的脚本命令test改为了start,并让其值为electron .,这个命令就是electron框架的运行命令,后面我们将直接使用npm run start代替,可以方便使用。

至此,我们的Electron就安装完成了!

三、简要总结

总的来说,上面这样的安装配置过程、乃至后文将要介绍的基本electron程序开发流程,都是一件非常繁琐的事情。

但我依旧还是推荐你挨着将其过一遍,因为这可以让你更好的理解electron的运行逻辑。

事实上在真正的项目开发时,我们并不需要手动执行这些过程,因为已经有相应的开源项目可以让我们免费使用了。

比如后续将要介绍的使用electron模板、或者直接使用vue开发electron。

原文以及该系列后续文章请参考:安装Electron

到了这里,关于1.Electron初始与安装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • electron、electron-forge 安装

    npm修改了registry,安装依旧无效 使用cnpm 倒是可以解决,但是 npx electron-forge import 中 Installing dependencies 使用的是npm 给出一次性解决方案: step1:切换npm的下载源,可以使用nrm 进行管理,有很多写的了,就不赘述了。 或者直接修改 (ps:如果你还想修改回来,可以记录一下现

    2024年02月13日
    浏览(35)
  • 正确安装Electron、Electron-quick-start和Electron Forge

    Electron Forge引用了Squirrel.windows项目,这导致Electron Forge生成的安装包只能安装在本地用户帐户中。 Or maybe you’re good at reinvent the wheel and can read this part of the documentation. ElectronForge文档 - 扩展 - 制作工具 Squirrel.Windows的Github议题 - Choosing install directory 打开命令行工具,输入 如果正

    2024年02月06日
    浏览(44)
  • 前端桌面应用开发实践:Electron入门指南

    随着互联网的快速发展,前端开发不再局限于网页应用,而是逐渐涉及到桌面应用的开发。Electron作为一种流行的前端桌面应用开发框架,为开发者提供了一种快速构建跨平台桌面应用的方式。本文将介绍Electron的基本概念和使用方法,并通过一个简单的示例来说明其开发实践

    2024年02月11日
    浏览(47)
  • 纯前端ELECTRON+VUE+FFMPEG实现多路播放RTSP流

    近期有项目需求前端播放rtsp视频流,项目是由electron+vue3搭建,没有后端,因此需要在前端实现解析rtsp流及播放,经过多方考察最后选用了ffmpeg+jsmpeg方案实现,具体实现是参考了@牧也の旅行 大佬的这篇文章 原文地址 实现的,感谢@牧也の旅行 一直在回复我的各种小白问题,

    2024年02月04日
    浏览(38)
  • web前端项目使用electron打包成跨平台桌面端程序(Windows)

    Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 在使用Electron进行开发之前,您需要安装 Node.js。 我们建

    2024年02月16日
    浏览(83)
  • 【electron】electron安装过慢和打包报错:Unable to load file:

    一、安装过慢问题: 一直处于安装过程 【 解决 】 二、打包报错:Unable to load file: 报错详情: 【 原因 】路径有中文,改为全英文路径

    2024年02月13日
    浏览(62)
  • 安装使用electron

    运行cmd查看是否安装及版本号 npm直接安装会报错缺少什么文件,使用cnpm进行安装 直接安装cnmp后,再用cnmp命令安装可能会报错Error: Cannot find module ‘node:util’ 原因是npm版本与cnpm版本,先卸载再指定版本安装 打开淘宝镜像网站链接https://npm.taobao.org/mirrors/electron/​​ 找到对应

    2024年02月10日
    浏览(36)
  • 安装electron项目报错问题

    npm install electron项目报错RequestError: socket hang up electron的安装并不依赖本地npm中registry所配置的镜像,需要增加名称为electron_mirror的镜像源,根目录新建.npmrc文件,添加electron_mirror=https://npm.taobao.org/mirrors/electron/即可。 修改后的文件内容如下:

    2024年02月04日
    浏览(51)
  • 2022.08 使用npm安装electron及electron-forge安装中出现的卡顿、缓慢、报错问题的个人解决办法

    最近想尝试一下使用electron,但是光安装和打包发布的尝试就调整了一天 以下包括 electron-forge环境变量设置 electron本体安装时候的网络问题 electron-forge安装时候的报错和缓慢问题 electron源在国外还真是困扰 本文写于2022/08/25,请保证您的npm和node版本尽量是新的 设置npm electro

    2024年02月09日
    浏览(63)
  • electron软件安装时,默认选择为全部用户安装

    后续可能会用electron开发一些工具,包括不限于快速生成个人小程序、开发辅助学习的交互式软件、帮助运维同学一键部署的简易版CICD工具等等。 开发进度,取决于我懒惰的程度。 不过不嫌弃的同学还是可以先关注一波小程序,真的发布工具了,肯定还是需要一个统一下载

    2024年02月11日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包