《Electron 开发》 环境配置和Helloworld
前言:
最近因为要帮别人做一个Mac和Windows平台下都使用的桌面应用,功能很简单,就是一个文本编辑器,所以大致了解了一下跨平台桌面应用开发的框架,知乎上推荐多半是 Electron
和 NW.js
,其中 Electron
比较成熟的产品有:Github开发的Atom
代码编辑器(已经开源)、微软的Visual Studio Code
、facebook的 nuclide
和 slack
等。
什么是 Electron
概述:
Electron
前称为atom shell
,是从github开源项目Atom编辑器中抽离出来的,是一个能让你通过 JavaScript
、HTML
和 CSS
构建桌面应用的库 。这些应用能打包到 Mac、Windows 和 Linux 电脑上运行。
组成:
Electron
结合了 Chromium
、Node.js
和用于调用3个操作系统本地功能的API(如打开文件窗口、通知、图标等):
Chromium
:Google 创造的一个开源库,并用于 Google 的浏览器 Chrome;Node.js
(Node):一个用于在服务器运行JavaScript的工具,拥有文件系统和网络的权限;Native API
:支持3个操作系统(Windows、Mac和Linux)的原生API库。
开发体验:
跟网页开发很相似,通过HTML和CSS搭建界面,使用Node(JavaScript)编写逻辑,就像开发一个Node应用。
环境配置:
安装 Node.js
和 npm
:
- 资源下载:
进入Node官网,下载指定版本的安装包,这里我下载的是:node-v6.10.2-x64.msi 安装配置:
直接双击下载好的安装包,按照引导完成node的安装,在环境变量中自动将安装目录添加到Path中:
新版的Node.js
已经集成了npm
,所以无需重复安装。版本查询:
在命令行窗口中输入版号查询指令进行查询:node -v npm -v
假如安装成功,结果如下:
Electron
快速起步:
源码:
Electron
源码下载地址:electronnpm切换到国内镜像:
上面运行npm install
安装项目的依赖资源的时候,出现了报错:”npm ERR!Windows_NT 6.1.7601”
报错原因是:npm原本的镜像资源索取代理地址默认是国外的 https://rubygems.org/,访问受限连接超时导致报错,有两种解决方法:- 方法一:翻墙(并非长久之计,但可以索取到最新的资源);
- 方法二:将代理设置为国内的地址,使用国内的npm镜像,通常使用阿里云提供的淘宝镜像:https://npm.taobao.org/或者腾讯的镜像:https://gems.ruby-china.org/,安装package时使用代理地址:
npm install -g package --registry=https://registry.npm.taobao.org
这里
package
是要安装的模块的名称,--registry
用来指定镜像索取地址。为了不用每次安装都指定一个地址,这里我们直接安装淘宝定制的
cnpm
修改如下://安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org //使用cnpm安装package,例如electron cnpm install -g electron
通过cnpm安装electron
看到官方的引导,开始使用要用npm
安装electron-prebuilt
,但是安装的时候会提示electron-prebuilt
已改名为electron
,而且这里我们使用的是cnpm
,所以使用以下方式:# Install the `electron` command globallycnpm install -g electron# Install as a development dependencycnpm install electron --save-dev
执行第一个安装指令会在系统盘下面的创建一个资源目录这里我的目录是:
C:\Users\Administrator\.electron
,该目录下多了两个文件:electron-v1.6.6-win32-x64.zip
和SHASUMS256.txt-1.6.6
:
起步案例:
github上提供了一个简单的案例:electron-quick-start
根据官方引导,使用以下指令:# Clone this repositorygit clone https://github.com/electron/electron-quick-start# Go into the repositorycd electron-quick-start# Install dependenciescnpm install# Run the appcnpm start
执行正常的输出如下,并弹出Helloworld窗口:
E:\Electron\electron-quick-start-master>cnpm install √ Installed 1 packages √ Linked 146 latest versions √ Run 1 scripts Recently updated (since 2017-04-26): 4 packages (detail see file E:\Electron\ele ctron-quick-start-master\node_modules\.recently_updates.txt) √ All packages installed (154 packages installed from npm registry, used 5s, sp eed 137.76kB/s, json 165(247.32kB), tarball 509.67kB)E:\Electron\electron-quick-start-master>cnpm start> electron-quick-start@1.0.0 start E:\Electron\electron-quick-start-master > electron .
这里展示的界面其实就是electron-quick-start目录下
index.html
的布局界面。
参考:
- Electron 系列教程
- Electron 的本质
《Electron 开发》 环境配置和Helloworld相关推荐
- 详细图解JDK+Tomcat Web开发环境配置和HelloWorld程序
一 首先下载tomcat和jdk,然后双击 jdk-8u40-windows-i586.1426143543 开始安装JDK 二 选择要安装的组件和安装目录:默认为C盘,此处装在D盘: 三 开始安装 ...
- 2020-11-05 转载 国内配置Electron开发环境的正确方式
原作者: 国内配置Electron开发环境的正确方式 https://blog.yasking.org/a/zh-install-electron-development-2020.html http ...
- 学习spring1--跟我一起学Spring 3(2)–开发环境配置
http://www.importnew.com/13185.html#spring 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - 导航条 -首页所有文章资讯W ...
- java系统教程_Java 教程(开发环境配置+基础语法)
Java 开发环境配置 在本章节中我们将为大家介绍如何搭建Java开发环境. window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www.ora ...
- 如何搭建Electron开发环境
原文发表于 https://lleohao.github.io/2017/09/02/如何搭建Electron开发环境/ 这个项目结构是我在编写 基于Electron 和 Angular 的七牛文件上 ...
- flex java 开发环境搭建_Flex+JAVA+BlazeDS开发环境配置(Java工程和Flex工程独立)
Flex+JAVA+BlazeDS开发环境配置(Java工程和Flex工程独立) 2019年12月07日 阅读数:7 这篇文章主要向大家介绍Flex+JAVA+BlazeDS开发环境配置(Java工程 ...
- java 开发环境 列表_Java 开发环境配置
其实大多数人都知道怎么配置但是却不懂什么原理 下面这个教程就给了详细步骤和解释 原文来源菜鸟教程 Java 开发环境配置 在本章节中我们将为大家介绍如何搭建Java开发环境. window系统安装ja ...
- creo2.0+VS2010采用protoolkit二次开发环境配置(64位win7)
在网上找了很多资料,也遇到过很多问题.本文的配置过程主要参考了网上的两篇文章,地址如下: http://www.doc88.com/p-3085972896759.html http://wenku. ...
- PhoneGapjQuery Mobile应用开发环境配置(For Android)
PhoneGap&jQuery Mobile应用开发环境配置(For Android) 看看新闻网>看引擎>开源产品 4人收藏此文章, 发表于2小时前(2013-08-19 16: ...
- eclipse配置python开发环境_Python开发环境配置步骤
Python开发环境配置步骤 导语:Python开发环境配置,你懂吗?下面的是百分网小编为大家搜集的Python开发环境配置步骤,希望可以帮到你. 1:安装python2.7 python-2.7.3 ...
最新文章
- 借鉴丰田方法对大型软件组织进行敏捷改造 (上)
- 深度学习手势识别带你玩转神庙逃亡
- 会为客户着想的商家才是好商家
- 操作系统外壳(shell)
- 【Linux系统编程】进程同步与互斥:System V 信号量
- 多继承有什么坏处,为什么java搞单继承,接口为什么可以摈弃这些坏处
- 区块链相关问题 理解
- 2019Mobicom 论文列表
- nginx 4层代理配置
- matlab用diag直接使用错误_精华液使用3大错误,过敏不能用,晒后不能用,第3点错得太常见!...
- 深入Istio架构和功能--理解数据面/控制面/流量管理/安全/可观察性
- CVPR 2019接收论文公布:共1300篇,接收率降4%,你中了没?
- HTML里face作用,html5 – @ font-face在子文件夹中的字体时不起作用
- RecyclerView.ViewHolder、Adapter
- 通过修改注册表权限修复ArcMap启动报错问题
- 周伟焜称卸任CEO后更忙 愿做IBM中国同事师傅
- Python:数据类型转换之将Scikit-learn的Bunch数据类型转换为Pandas的DataFrame类型案例及代码实现
- 计算机网络有多种类别按照不同的的作用范围,计算机网络分类,性能
- 安卓手机修改音量键为HOME和BACK
- win10自带sftp服务器_FreeSSHD在Windows环境下搭建SFTP服务器
热门文章
- ITEXT 把表格定位在固定位置
- 深海迷航创造模式火箭怎么飞_深海迷航火箭怎么起飞
- win10网页找不到服务器dns,教你win10打开网页提示无法解析服务器dns地址的解决教程。...
- Python3.X网络爬虫学习(六)
- 第2章 多维数据结构与运算答案
- Problem D. S03-05 计算球体表面积和体积
- 奥迪A6(C5)遥控器钥匙更换电池后无法使用的适配(对码)方法
- 建筑施工与管理计算机综合应用能力实训报告,建筑施工管理计算机综合应用能力实训报告...
- 硬件安全之ARM体系架构的演进
- linux驱动学习的磕磕碰碰