Electron Helloworld

Electron官网
Electron中文网
w3cschool Electron 中文文档

一、概述

Electron 前称为atom shell，是从github开源项目Atom编辑器中抽离出来的，是一个能让你通过 JavaScript、HTML 和 CSS 构建桌面应用的库 。这些应用能打包到 Mac、Windows 和 Linux 电脑上运行。

image.png

它还有其它一些特性：

• 自动更新 —— 应用支持自动更新
• 原生菜单和通知 —— 可以创建原生应用菜单和上下文菜单
• 应用崩溃报告 —— 可以将崩溃报告提交到远程服务器
• 调试和分析 —— Chrominum 的内容模块可以发现性能瓶颈和缓慢的操作。你也可以在应用中使用自己喜欢的 Chrome 开发者工具。
• Windows installer —— 可以快速便捷地创建安装包。

二、HelloWorld

参考
electron打包：electron-packager及electron-builder两种方式实现（for Windows）
【Electron】Electron开发入门（五）：项目打包
1.运行demo
cnpm i -g electron之后，下载electron-quick-start到对应目录，cnpm install安装本地环境，然后npm start即可运行。

  "scripts": {
    "start": "electron ."
  },

这里本质上是在运行electron index.html

2.安装electron打包工具electron-packager
作为一个桌面应用程序，我们希望点击exe文件就能直接启动应用，而不是打开命令行，输入启动命令。这一步就需要打包工具来完成了。
npm install electron-packager -g
使用参数如下：
electron-packager --platform= --arch= [optional flags...]
比如：

"scripts": {
    "start": "electron .",
    "pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0"
  }

命令结构如下（根据实际情况修改）：

“.”：需要打包的应用目录（即当前目录），

“myClient”：应用名称，

“--win”：打包平台（以Windows为例），

“--out ../myClient”：输出目录，

“--arch=64”：64位，

“--app-version=0.0.1”：应用版本，

“--electron-version=2.0.0”：electron版本

3.Inno Setup
现在，我们已经得到了应用程序的绿色版本（无需安装，拷贝整个文件目录之后即可使用），但是作为客户端应用程序，我们更希望能直接得到一个安装包，安装之后通过桌面快捷方式的形式去访问，这时候就需要Inno Setup出场了。
具体细节参考electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动

三、electron-vue

快速创建一个electron-vue工程
electron-vue中文文档
苏南大叔博客