首先戳我下载安装对应版本的node.js。

  安装完成后,打开命令行输入node -v以及npm -v查看对应版本。能够正常显示说明安装成功。

  写一个最简单的hello world的nodejs应用。nodejs的基础目录结构如图:

  ♦ node_modules文件夹用于存放开发或应用时的依赖

  ♦ index.html:初始化的页面

  ♦ main.js:生命周期控制

  ♦ package.json:全局配置

  如果有小伙伴不知道怎么写,可以参考https://github.com/electron/electron-quick-start

  我写好了一个简单的html:

注:如果在代码中使用jQuery时遇到问题,请参考

  戳我下载Electron。下载完Electron后需要在package.json中添加如下代码(版本号需要对应,别忘了用逗号分隔)

"devDependencies":{
"electron":"1.6.2"
},

  打开Electron,将我们写好的程序包拖到Electron下方的窗口中

  我们就得到了一个预览版的桌面应用程序

  窗体的大小都可以在main.js中进行配置。

  下一步进行程序的打包,在cmd命令行中执行以下命令:

npm install electron-packager --save-dev

  打开package.json,发现devDependencies中新加了一个electron-packager的版本。

  在package.json中在加上如下代码:

  "scripts": {
"package":"electron-packager ./ demo --platform=win32 --arch=x64 --version=1.6.2"
},

  ♦ package:script脚本的名称

  ♦ demo:打包后的程序的名字

  ♦ platform:操作系统(这边是windows系统)

  ♦ arch:系统的位数(这边是64位)

  ♦ version:electron的版本号

  在cmd命令行中,运行如下代码:

npm run-script package

  运行完了,当前目录下会生成一个文件夹,名称为程序名+操作系统+位数。

  成功将web应用转化为桌面应用。

Electron:将前端应用打包成桌面应用的更多相关文章

  1. Electron把网页打包成桌面应用并进行源码加密

    前言 最近想把自己用html+css+js做的网页界面打包成桌面应用,网上一搜,发现Electron是一个不错的选择,试了试,发现效果真的不错.这里记录一下打包过程以作记录,便于自己以后查看学习. 一 ...

  2. electron将网站打包成桌面应用

    需求同 NW.js将网站打包成桌面应用 1. 从github上克隆electron示例项目 git clone https://github.com/electron/electron-quick-s ...

  3. nodejs打包成桌面程序(exe)的进阶之路

    nodejs打包成桌面程序(exe)的进阶之路 node js bat 前端 计划任务 前言:最近的研究,请大佬们细品 第一篇 - 任务计划程序篇 说真的研究到将nodejs打包成可执行的exe文件是 ...

  4. 用node-webkit把web应用打包成桌面应用

    node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦.很显然比起传统的桌面 ...

  5. 前端打包成桌面应用、以及chrome扩展

    前段时间在利用工作之余开发了tomato timer这个蕃茄钟,然后部署到github.io上,由于greatway太厉害,偶尔会有打不开的情况.上周末对比做了扩展和改进,使其成为chrome的插件, ...

  6. electron 打包成桌面运用

    最近在学习nodejs,得知Electron是通过将Chromium和Node.js合并到同一个运行时环境中,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一门技术.对于之前一直从 ...

  7. electron打包成桌面应用程序的详细介绍

    1.前提条件 a. 安装了node b.安装了electron c.你知道自己写的东西(js,css,html等等)放在那个文件夹(假设这个文件夹命名为 app,下面会用到)中 2.安装electro ...

  8. 将你的前端应用打包成docker镜像并部署到服务器?仅需一个脚本搞定

    1.前言 前段时间,自己搞了个阿里云的服务器.想自己在上面折腾,但是不想因为自己瞎折腾而污染了现有的环境.毕竟,现在的阿里云已经没有免费的快照服务了.要想还原的话,最简单的办法就是重新装系统.而一旦重 ...

  9. 2、node-webkit运行web应用,node-webkit把web应用打包成桌面应用

    下面我通过一个简单的demo来介绍怎么样把一个web应用打包成一个可执行文件(这里只介绍windows环境) 首先新建一个index.html文件,作为我们这个demo的入口页面,我们暂且就把这个页面 ...

随机推荐

  1. debussy与modelsim的联调设置

    前段时间看到网上有人在使用debussy软件对Verilog代码进行调试,而且都称赞其是多么的好用,看着很是馋人,说吧,现在用的是quartus与modelsim的联调,似乎还是可以的,但就是每次稍微 ...

  2. HTML中设置超链接字体 & 字体颜色

    定义链接样式 CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :visited : ...

  3. python进行机器学习(五)之模型打分

    一.画出模型的残差值分布情况 #!/usr/bin/python import pandas as pd import numpy as np import csv as csv import mat ...

  4. perl HTML::LinkExtor模块(1)

    use LWP::Simple; use HTML::LinkExtor; $html = get("http://www.baidu.com"); $link = HTML::L ...

  5. Django【设计】settings方案

      配置文件: 目标:配置文件,默认配置和手动配置分开,参考django的配置文件方案,默认配置文件放在内部,只让用户做常用配置   /bin/settings.py(手动配置) PLUGIN_ITE ...

  6. linux命令行todo列表管理工具Taskwarrior介绍

    Taskwarrior 是一款在命令行下使用的TODO列表管理工具,或者说任务管理工具,灵活,快速,高效. 安装 在ubuntu 14.04 中,可从官方仓库安装task软件包 sudo apt-ge ...

  7. python基础===继承

    编写类时,并非总是要从空白开始.如果你要编写的类是另一个现成类的特殊版本,可使用继承.一个类继承另一个类时,它将自动获得另一个类的所有属性和方法:原有的类称为父类,而新类称为子类.子类继承了其父类的所 ...

  8. java 和 JVM

    C++和Java的区别 指针:java中不存在指针的概念,编程者无法直接通过指针来直接访问内存,有利于维护java程序的安全 多重继承:C++支持多重继承,java不支持多重继承,但是允许一个类继承多 ...

  9. 解决Mac开机变慢 command +option + P + R

    Mac开机变慢怎么办? command +option + P + R 重点是 开机 后 一直按 该4个键不放  听到3声音响 屏幕出现灰暗灰暗几次 开机速度 5s 重置PRAM和NVRAM的方法都是 ...

  10. gunicorn 启动无日志

    gunicorn -c gunicorn_info.py info:app 接手整理老项目,发现有个服务迁移后启动不了,也没报错信息 修改gunicorn_info.py里的daemon = not ...