前言

  本人是做java开发的(菜鸟),做web项目的朋友们基本上都会遇到同样一个,永远不知道客户会怎么样使用,或者说永远不知道客户会用什么浏览器打开我们做出来的应用,就算你跟他说明了一定得用某某某浏览器打开,还是有人会用别的浏览器打开,这种情况通常我们会去做适配(前端),最近公司有需求要把一个项目做成Windows桌面应用,由于我们公司的前端工程师刚好离职了,然后就由我去看这块,为了方便以后的查阅和记录学习过程,决定写下这篇文章,希望有看到的会用electron的朋友指点一下。

简介

  electron是由GitHub开发,用CSS、HTML和JavaScript来构建跨平台桌面应用程序的一个开源库,Electron通过将Chrom和Node.js合并到同一个运行时环境中,并将其打包为Mac、Windows和Linux系统下的应用来实现这一目的。

  官网地址:http://electronjs.org/

  官方文档地址:http://electronjs.org/docs/

安装

  安装说明:

  • 安装环境为Windows10,用的命令行程序是PowerShell
  • 文字背景颜色含义:黄色的是命令行命令,红色的是必须项(只会出现在代码行中,意思是必须要这样写)
  • 安装electron前确保安装环境下能在命令行中执行npm命令(也就是说确定环境下安装了node.js),检查方式:在命令行中输入 npm -version 查看npm(node.js)的版本

  步骤:

  1. 在任何一个磁盘上创建一个空的文件夹(如,在F盘下创建一个名字叫test的文件夹,则路径为:F:\test,下文用到路径的都用此路径)
  2. 打开PowerShell进入到F:\test,可以直接在F:\test中按shift+右键,然后选择“在此处打开PowerShell窗口”,但是这样打开的不是以管理员身份打开的,建议还是用管理员身份打开,用管理员身份打开的方式是,在任务栏window图标地方按右键,然后点击“Windows PowerShell(管理员)”,然后在PowerShell中输入并执行 cd F:\test
  3. 初始化一个node.js的项目,在命令行中输入并执行: npm init ,执行后根据提示输入相应的信息(也可以一直按回车,不输入任何东西,用它的默认值),完成后在F:\test目录下会多出一个 packet.json的文件(注意:操作完这步后命令行不要关闭)
  4. 编辑刚刚生成的packet.json,用文本编辑器打开packet.json,根据实际情况编辑内容,可以参考以下配置
     //初始化后文档内容(一直按回车生成的)
    
     {
    
       "name": "testtwo",
    
       "version": "1.0.0",
    
       "description": "",
    
       "main": "index.js",
    
       "scripts": {
    
         "test": "echo \"Error: no test specified\" && exit 1"
    
       },
    
       "author": "",
    
       "license": "ISC"
    
     }
    
     //修改后的内容
    
     {
    
       "name": "testtwo",
    
       "version": "1.0.0",
    
       "description": "",
    
       "main": "main.js",
    
       "scripts": {
    
         "start": "electron ."
    
       },
    
       "author": "",
    
       "license": "ISC"
    
     }
  5. 配置完之后就是安装electron,回去刚刚的命令行(如果关掉了的话重复操作步骤2),输入并执行 npm install --save-dev electron,然后electron就安装完成了

Electron学习(一)——— electron的安装的更多相关文章

  1. electron教程(一): electron的安装和项目的创建

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...

  2. Electron学习入门

    1.安装electron,不建议全局安装,这样每个app可以使用不同的electron版本了 2.配置package.json中的script下的start属性的值为electron . Electr ...

  3. 第二章 你第首个Electron应用 | Electron in Action(中译)

    本章主要内容 构建并启动Electron应用 生成package.json,配置成Electron应用 在你的项目中包含预先构建Electron版本 配置package.json以启动主进程 从主进程 ...

  4. InfluxDB学习之InfluxDB的安装和简介

    最近用到了 InfluxDB,在此记录下学习过程,同时也希望能够帮助到其他学习的同学. 本文主要介绍InfluxDB的功能特点以及influxDB的安装过程.更多InfluxDB详细教程请看:Infl ...

  5. Java 学习第一步-JDK安装和Java环境变量配置

    Java学习第一步——JDK安装及Java环境变量配置 [原文]  2014-05-30 9:09  Java SE  阿超  9046 views Java作为当下很主流的编程语言,学习Java的朋 ...

  6. 跟我学习dubbo-ZooKeeper注册中心安装(2)

    注册中心 可选方案:zookeeper.Redis 1.建议使用dubbo-2.3.3以上版本的使用zookeeper注册中心客户端 2.Zookeeper是Apache Hadoop的子项目,强度相 ...

  7. OpenGL学习之windows下安装opengl的glut库

    OpenGL学习之windows下安装opengl的glut库 GLUT不是OpenGL所必须的,但它会给我们的学习带来一定的方便,推荐安装.  Windows环境下的GLUT下载地址:(大小约为15 ...

  8. PHP学习笔记----IIS7下安装配置php环境

    原文:PHP学习笔记----IIS7下安装配置php环境 Php如何安装 Php版本的选择 Php在windows下的(php5.4.7)有两种版本: VC9 x86 Non Thread Safe ...

  9. [深度学习工具]·极简安装Dlib人脸识别库

    [深度学习工具]·极简安装Dlib人脸识别库 Dlib介绍 Dlib是一个现代化的C ++工具箱,其中包含用于在C ++中创建复杂软件以解决实际问题的机器学习算法和工具.它广泛应用于工业界和学术界,包 ...

随机推荐

  1. python基础之Day10

    一.函数的返回值 1.什么是返回值返回值是一个函数的处理结果, 2.为什么要有返回值如果我们需要在程序中拿到函数的处理结果做进一步的处理,则需要函数必须有返回值 3.函数的返回值的应用函数的返回值用r ...

  2. Axure RP Extension for Chrome 插件安装

    描述 我的chmod浏览器上不去谷歌商店,我用的是蓝灯,登上商店后搜索Axure RP Extension for Chrome,下载安装,完成后进入这个插件的详细信息: 使用 打开用axure生成的 ...

  3. 【微信小程序开发】全局配置

    今天看看小程序全局配置. 上一篇[微信小程序开发]秒懂,架构及框架 配置,无非就是为了增加框架的灵活性,而定下的规则. 微信小程序的配置文件是一个树状结构,各个节点代表不同的配置项,小程序框架会解析这 ...

  4. Linux学习---条件预处理的应用

    预处理的使用: ⑴包含头文件 #include ⑵宏定义 #define    替换,不进行语法检查 ①常量宏定义:#define 宏名 (宏体) (加括号为防止不进行语法检查而出现的错误) eg:# ...

  5. python bittorrent 使用与学习

    更新于20171128 关于这个p2p的技术,阿里开源了蜻蜓,大家可以看看,感觉应该比这个要好用,而且文档也全. 前言 最近在学习python的p2p协议,发现网上找不到好的文章,又仔细找了找终于找到 ...

  6. .NET Core微服务之路:让我们对上一个Demo通讯进行修改,完成RPC通讯

    最近一段时间有些事情耽搁了更新,抱歉各位了. 上一篇我们简单的介绍了DotNetty通信框架,并简单的介绍了基于DotNetty实现了回路(Echo)通信过程. 我们来回忆一下上一个项目的整个流程: ...

  7. Input and Output File

    Notes from C++ Primer File State Condition state is used to manage stream state, which indicates if ...

  8. 小试 boost spirit

    解释文本文件是日常编程中太平常的一件事情了,一般来说,土鳖点的做法可以直接手写 parser 用循环暴力地去 map 文本上的关键字从而提取相关信息,想省力一点则可以使用 tokenizer 或正则表 ...

  9. OkHttp 入门篇

    OkHttp是一个HTTP & HTTP2的客户端,能够用来进行Android 和 Java 开发. HTTP是现代应用的最基本的网络环境.让你的HTTP更加有效的工作能够让你的东西加载更快而 ...

  10. Baidu WebUploader 前端文件上传组件的使用

    简介 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流I ...