Electron开发环境部署

安装node.js

可以从node.js官方网站上获取安装包，并进行安装，安装完可以通过

下载地址：

ndoe -v

指令进行版本查看。 本文的开发环境为node.js 4.4.5。

安装node.js的同时，会一并安装包管理器npm，用于对开发包进行统一管理。

使用淘宝镜像/nrm进行安装源管理

由于GFW的存在，无法方便地通过npm直接下载各种开发包，所以我们需要对安装源进行更改。

通过命令

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

可以从淘宝提供的镜像中安装替代的包管理器cnpm，该安装源由淘宝提供和管理，定期与官方源同步，经过测试，下载速度很理想。使用cnpm替代npm，同样能够实现开发包管理。但是，如果你还是习惯使用npm进行包管理，那么，可以通过安装镜像管理器nrm来在不同的源中无缝切换。

先用cnpm安装nrm

cnpm install -g nrm

然后

nrm ls

能够看到所有的源

#  npm ---- https://registry.npmjs.org/#  cnpm --- http://r.cnpmjs.org/#* taobao - http://registry.npm.taobao.org/#  nj ----- https://registry.nodejitsu.com/#  rednpm - http://registry.mirror.cqupt.edu.cn#  npmMirror  https://skimdb.npmjs.com/registry

通过

nrm use cnpm

可以选择使用cnpm作为默认的安装源，此时，使用npm将会默认从淘宝安装源进行安装。

安装Electron开发环境

进行Electron开发之前，先要部署开发环境，在有node.js开发环境的基础上，可以通过npm进行开发环境的安装。

安装有两种方式

• 全局安装

# Install the `electron` command globallynpm install electron-prebuilt -g

• 当前目录下安装

npm install electron-prebuilt --save-dev #Install as a development dependency

二者选一个即可。

安装完成后建立app目录，然后将官网的quick-start中的内容分别拷贝到package.json，main.js，index.html下。

运行命令

cd appelectron .

即可看到hello world程序运行。

Electron Hello Worldd 代码

目录结构

F:\code\electron\hello>tree /f卷 code 的文件夹 PATH 列表卷序列号为 000000BB 349E:A444F:.    index.html    main.js    package.json没有子文件夹F:\code\electron\hello>

package.json

{  "name"    : "your-app",  "version" : "0.1.0",  "main"    : "main.js"}

main.js

const electron = require('electron');// Module to control application life.const {app} = electron;// Module to create native browser window.const {BrowserWindow} = electron;// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.let win;function createWindow() {  // Create the browser window.  win = new BrowserWindow({width: 800, height: 600});  // and load the index.html of the app.  win.loadURL(`file://${__dirname}/index.html`);  // Open the DevTools.  win.webContents.openDevTools();  // Emitted when the window is closed.  win.on('closed', () => {    // Dereference the window object, usually you would store windows    // in an array if your app supports multi windows, this is the time    // when you should delete the corresponding element.    win = null;  });}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow);// Quit when all windows are closed.app.on('window-all-closed', () => {  // On OS X it is common for applications and their menu bar  // to stay active until the user quits explicitly with Cmd + Q  if (process.platform !== 'darwin') {    app.quit();  }});app.on('activate', () => {  // On OS X it's common to re-create a window in the app when the  // dock icon is clicked and there are no other windows open.  if (win === null) {    createWindow();  }});// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.

index.html

      
                
Hello World!
    We are using node ,    Chrome ,    and Electron .  

运行

F:\code\electron\hello>electron .

运行效果：