electron的艰难安装之旅

最近对前端开发很感兴趣,抽空研究了下前段的开发工具,发现比较流行的是sublime,atom,vscode等,

由于一直以来从事.net开发所以对vscode很感兴趣,在vscode的安装配置过程偶然发现巨头微软的vscode

是采用electron为基础开发的,瞬间被震住了,以前不关注前端,虽然知道微软的发布了一款轻量级的编辑器

却没觉得有多大用处,甚至觉得没有visual studio好用,了解前端开发之后猛然觉得这是一款高大上的前端ID E,

加上对史称最强大友好的visual studio的好感,觉得vscode一定会继承visual studio的优良基因,于是一番折腾

安装配置,期间对于electron很是好奇,百度一下,原来electron是基于大名鼎鼎的node.js而来的,electron让我们

使用javascript,html5,css3开发富交互桌面应用变得轻松,重要的是通过electron我们可以使用javascript完成对

本地操作系统接口的调用,这对于以前搞前端应用开发动不动要搞一个activex插件来完成本地设备的调用这种扯淡而又

兼容性不好的解决方案来说,简直是逆天了,由于electron基于node,Chromium,v8,使得前端开发中经常遇到的浏览器

兼容性问题彻底消失,可以说这是桌面应用程序的春天,基于electron的桌面程序,兼容性好,可以利用前端技能,又可以

跨平台,UI部分可以充分利用现有的web前端应用框架,可以说是一举多得。

言归正传,扯了这么多,其实就是对electron是如何工作的很好奇,想自己动手试试。

一、由于electron是基于nodejs的,所以我们首先要安装nodejs

nodejs安装比较简单,国内可以直接访问官网 https://nodejs.org/en/

然后下载安装最新的版本即可,在此不在赘述。

安装完成之后打开命令行工具,输入node -v,npm -v,可以看到如下显示,说明node安装成功。

(npm是node的模块管理工具,由node附带安装)

由于nodejs,electron比较流行,所以可以在网上找到很多教程,在此列出一篇来自知乎的入门教程

https://zhuanlan.zhihu.com/p/20225295?columnSlug=FrontendMagazine

本人按照上面的教程一步一步操作,本以为可以顺利启动,谁知道中间遇到了个大坑,耗费了整整一天多的

时间才把问题解决。下面详细说明一下问题的来龙去脉,以供大家参考。

由于现在代码托管仓库流行git,尤其是开源的项目,需要大家自行安装配置一下git才能按照上面的教程

一步一步实践,git安装配置比较简单,网上教程多,坑少,自己解决。

二、关键一步是从git克隆代码到本地之后

git clone https://github.com/bojzi/sound-machine-electron-guide.git

由于该演示程序是关于electron的,所以启动的时候需要依赖electron,所以需要先安装依赖,
基于electron的项目的根目录下有一个package.json的文件,它描述了项目启动的依赖模块,所以在
启动之前我们需要运行npm install命令来安装依赖模块,其实就是安装electron,虽然可以从淘宝镜像
获取electron的最新zip包,但是解压了不知道如何是好,没法和基于electron的应用结合起来(主要是初次接触不了解所致),
只能安装教程一步一步操作,当在sound-machine-electron-guide目录下执行npm install命令后,等待好久最后报

npm ERR! network connect ETIMEDOUT
npm ERR! network This is most likely not a problem with npm itself
npm ERR! network and is related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settin
gs.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

npm ERR! Please include the following file with any support request:
npm ERR! C:\Program Files\nodejs\npm-debug.log

类似上面的异常,有时候报192.30.253.113:443异常,总之经过搜索N多次之后才发现到底还是网络的原因。
中间设置过代理,
npm config set proxy http://server:port
npm config set https-proxy http://server:port

后来又改回去了,还修改过hosts文件

尝试过好多其他的方法,都不行

真是踏破铁血无觅处,得来全不费工夫,误打误撞发现了一篇博文

https://segmentfault.com/a/1190000007903823

根据里面的介绍明白了,直接访问国外的服务器太慢,可以使用

npm install cnpm -g --registry=http://registry.npm.taobao.org

命令先安装淘宝镜像的包命令行管理工具cnpm,然后再安装

cnpm install electron -g

即可快速完成安装,注意上面的npm install cnpm -g --registry=http://registry.npm.taobao.org

在执行的时候有时候比较慢,需要耐心等待完成之后再进行下一步,我差点没等住就把窗口关闭了。

也可以cnpm install直接安装当前目录下的应用的依赖包,待安装完成之后

执行 cnpm start即可启动基于electron的应用程序。如下图所示:

至此,一个简单的入门程序算是跑起来了,接下啦就可以自己学习研究如何基于此开发属于自己的桌面web程序了。

上面是electron官网提供的demo程序,下面是知乎入门教程https://zhuanlan.zhihu.com/p/20225295?columnSlug=FrontendMagazine

的demo程序启动之后的画面

大家可以参考学习一下,看似一个简单的程序,真正动起手来不是那么容易就搞定的,一定要多实践才是。

标签: electron

转载于:https://www.cnblogs.com/xiaocongcong888/p/9385114.html

你可能感兴趣的:(前端,git,javascript,ViewUI)