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')
  2. let win
  3. function createWindow () {
  4. win = new BrowserWindow({width: 800, height: 600})
  5. win.loadURL(`file://${__dirname}/index.html`)
  6. win.webContents.openDevTools()
  7. // 处理窗口关闭
  8. win.on('closed', () => {
  9. win = null
  10. })
  11. }
  12. // Electron初始化完成
  13. app.on('ready', createWindow)
  14. // 处理退出
  15. app.on('window-all-closed', () => {
  16. if (process.platform !== 'darwin') {
  17. app.quit()
  18. }
  19. })
  20. app.on('activate', () => {
  21. if (win === null) {
  22. createWindow()
  23. }
  24. })

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"选项用于覆盖输出)。

electron 安装的更多相关文章

  1. Electron安装过程深入解析（读完此文解决Electron应用无法启动，无法打包的问题）

    1. 安装Electron依赖包 开发者往往通过npm install(或 yarn add)指令完成为Node.js工程安装依赖包的工作, 安装Electron也不例外,下面是npm和yarn的安装 ...

  2. Electron安装

    1.安装nodejs和npm 官网下载地址:https://nodejs.org/en/download/ 安装包:下载.msi 安装完成后: nodejs.npm都会安装好,path环境变量也自动设 ...

  3. electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动

    1.初始化node项目,生成package.json文件 npm init 2.安装electron,并保存为开发依赖项 npm install electron -D 3.根目录下新建index.j ...

  4. electron安装到第一个实例

    1.node.js下载,然后安装.下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2.cmd下输入:npm install electron-prebu ...

  5. Electron 安装与使用

    Electron是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用 本文基于Windows进行开发的过程,记录下来,以便日后使用,Electron官网:https://elec ...

  6. electron安装与使用

    系统 WIN10 X64 1. python-2.7.15.amd64.msi 2. node-v10.4.1-x64.msi 3. VS2015 community(社区版) 4. npm conf ...

  7. electron 安装失败解决办法

    1.安装node https://nodejs.org/en/download/2.安装镜像工具npm install -g cnpm --registry=https://registry.npm. ...

  8. electron 安装使用

    1.安装 node.js 链接:http://pan.baidu.com/s/1o7W7BIy 密码:y6od 一路next 我安装在F:\Program Files\node.js下 2.检查nod ...

  9. 为Electron 安装 vue-devtool等扩展

    相关代码: https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js 在SPA逐渐成为构建优秀交互体验应 ...

随机推荐

  1. HashMap与TreeMap

    package com.jckb; import java.util.Map; import java.util.Set; import java.util.TreeMap; /**TreeMap * ...

  2. 使用Robot类模拟鼠标、键盘事件

    Robot类用于模拟鼠标.键盘事件,生成本机系统输入事件.Robot 的主要用于自动化.自运行的程序和其他需要自动控制鼠标和键盘的程序 相当于实际操作的效果,不仅仅只是生成对应的鼠标.键盘事件.比如R ...

  3. cocos2dx贝塞尔曲线--使用PS辅助规划动作路径

    bool HelloWorld::init() { ////////////////////////////// // 1. super init first if ( !Layer::init() ...

  4. 测试的发现遗漏BUG的做法

    首先要确认BUG的影响范围: 后续做法如下: 1.从测试角度来说,外部缺陷等同与系统崩溃,测试是必须提的2.可以询问主管或负责人是否在后一个版本中修改3.评估缺陷对于用户使用存在多大的不便4.判定缺陷 ...

  5. Exchange DSAccess 事件分析

    本文介绍了如何使用事件 ID 2080 来帮助诊断 Exchange DSAccess 问题中所包含的信息. 许多朋友经常遇到Active Directory 域和Exchange 服务器通信问题.那 ...

  6. ZOJ 3471 Most Powerful （状压DP，经典）

    题意: 有n个原子,每当两个原子碰撞时就会产生能量,并且消耗其中一个原子.已知每两个原子碰撞时消耗其中指定一个原子所产生的能量,问最多能产生多少能量? 思路: 一开始以为是找一个有序序列,使得能量最大 ...

  7. java入门第一章——java开发入门

    习题解答 一.填空题 (p2)1.java的三个技术平台分别是(java SE.java EE.java ME)(标准.企业.小型) (p3)2.java程序的运行环境简称为(JRE)(开发环境-JD ...

  8. 为了少点击几次，自己写了一个Chrome插件

    缘由 chrome应用商店有三款二维码插件,自己一直使用的第一款.这三款插件有且只有一个功能就是生成当前页面的URL的二维码. 其实这个功能基本上满足了需要移动端开发在微信里打开页面进行调试的情况. ...

  9. 10款免费的MySQL数据库图形化管理工具

    绝大多数的关系数据库都明显不同于MS Access,它们都有两个截然不同的部分:后端作为数据仓库,前端作为用于数据组件通信的用户界面.这种设计非常巧妙,它并行处理两层编程模型,将数据 层从用户界面中分 ...

  10. 2018.4.22 深入理解Java的接口和抽象类

    前言 对于面向对象编程来说,抽象是他的一大特征之一.在Java中,可以通过两种形式来体现oop 的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初雪的时候会以为他们可以随意互 ...