electron 安装

1、从网上下载的是nodejs的v0.10.42版本的安装文件，安装node-v0.10.42-x86.msi都使用默认安装，安装完成后会安装在C:\Program Files\nodejs\目录下，然后直接把安装的目录C:\Program Files\nodejs\拷贝出来，然后再拷贝到另外一个全新的系统上，假如我放到d:\nodejs\这个目录下，在这个目录中创建一个run.bat文件作为我们的运行环境。

编辑run.bat文件，输入内容如下：

复制代码
@echo off

echo        ---------- init Node JS environment ---------- & echo.

if not EXIST "%APPDATA%\npm" ( md "%APPDATA%\npm" )
if not EXIST "%cd%\node_global" ( md "%cd%\node_global" )
if not EXIST "%cd%\node_cache" ( md "%cd%\node_cache" )

if not EXIST "%cd%\tmp.txt" ( call npm config set prefix "%cd%\node_global")
if not EXIST "%cd%\tmp.txt" ( call npm config set cache  "%cd%\node_cache")
echo.>tmp.txt

set path=%cd%\node_global;%cd%;%path%
set node_path=%cd%\node_global\node_modules    ::这一步应该可以不需要配置

call npm config get prefix & echo. &echo.
echo ------------------------------------------------------------
call npm config get cache & echo.
echo ============================================================
echo. & echo Node JS system environment is ready & echo. & echo.


cmd /k
复制代码

以上代码我不多解释，相信对你来说都是小意思，现在我们可以双击run.bat这个文件，则打开一个cmd窗口，在这个窗口中你可以切换到任何目录下，然后执行node -v 和 npm -v查看当前node和npm的版本号，如下：

 

因为可能的wall问题，所以建议把npm的仓库切换到国内taobao仓库，执行下面的命令：

  1. npm config set registry "https://registry.npm.taobao.org/"

2. Electron的安装
因为前面已经启用了node/npm，所以可以采用npm的方法安装Electron。
为了测试的方便，我是在命令行窗口中采用下面的命令:

  1. npm install -g electron 

把Electron安装到系统全局中的。你也可以在你开发项目下采用不加'-g'的命令进行安装。

3. 编程环境安装
当前微软提供了一个强大的免费开发工具VISUAL STUDIO CODE ,直接下载安装即可，它支持nodejs等的代码提示，很是方便。

4. 打包输出工具
为了方便最终成果输出，建议安装electron-packager工具，安装也很简单，建议以下面的命令全局安装。

  1. npm install -g electron-packager

5. 如果需要采用git进行版本控制，建议安装git工具
直接在git 下载最新版本的安装即可。

至此实际上开发环境已经搭建好了。下面说一下开发流程。

到空白的项目目录中，打开命令行窗口（也可以打开git bash）
0. 如果需要git，先做

  1. git init

1.构建项目package.json文件

  1. npm init

根据需要输入内容（下面的内容根据Electron Quick start编写）。即在package.json中有如下内容：

  1.  { 
      "name" : "electron-quick-start", 
      "version" : "1.0.0", 
      "main" : "main.js" 
}

2.重新写入依赖

  1. npm install electron --save
  2. npm install electron-packager --save-dev

3.在main.js中输入

  1. const {app, BrowserWindow} = require('electron')

  3. let win

  5. function createWindow () {
  6.  
  7.   win = new BrowserWindow({width: 800, height: 600})

  9.   win.loadURL(`file://${__dirname}/index.html`)

  11.   win.webContents.openDevTools()

  13.   // 处理窗口关闭
  14.   win.on('closed', () => {
  15.     win = null
  16.   })
  17. }

  19. // Electron初始化完成
  20. app.on('ready', createWindow)

  22. // 处理退出
  23. app.on('window-all-closed', () => {
  24.   if (process.platform !== 'darwin') {
  25.     app.quit()
  26.   }
  27. })

  29. app.on('activate', () => {
  30.   if (win === null) {
  31.     createWindow()
  32.   }
  33. })

4. 在index.html中输入

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World!</title>
  6.   </head>
  7.   <body>
  8.     <h1>Hello World!</h1>
  9.     node 当前使用的node为<script>document.write(process.versions.node)</script>,
  10.     Chrome 为<script>document.write(process.versions.chrome)</script>,
  11.     和 Electron 为<script>document.write(process.versions.electron)</script>.
  12.   </body>
  13. </html>

5. 测试执行

  1. electron .

这将打开一个新的窗口，如图
也可以统一纳入npm管理，即在package.json中添加字段定义

  1. "scripts": {
  2. "start":"electron ."
  3. }

这样就可以在命令行中用 npm start 来启动程序。
6. 打包输出

  1. electron-packager . --platform=win32

将在项目目录下建立一个输出文件夹“electron-quick-start-win32-x64”(注意这里的目录名称win32-x64前的部分是package.json中name字段值)，里面就是放置的整个项目的打包，可以复制这个文件夹到任何win32环境中运行（其中electron-quick-start.exe其启动文件），这个工作也可以纳入npm统一管理，在package.json 的“scripts”字段下增加子字段定义即可。如：

  1. "scripts": {
  2. "start":"electron .",
  3. "win32pack":"electron-packager . --platform=win32 --overwrite"
  4. }

这样就可以在命令行中用 npm run win32pack 来输出win32环境下的打包程序("--overwrite"选项用于覆盖输出)。

 

posted @ 2017-08-03 10:44  欧阳平  阅读(12965)  评论(0)  编辑  收藏  举报