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仓库，执行下面的命令：

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

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

npm install -g electron

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

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

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

npm install -g electron-packager

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

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

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

git init

1.构建项目package.json文件

npm init

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

 {

      "name" : "electron-quick-start",

      "version" : "1.0.0",

      "main" : "main.js"

}

2.重新写入依赖

npm install electron --save
npm install electron-packager --save-dev

3.在main.js中输入

const {app, BrowserWindow} = require('electron')
let win
function createWindow () {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(`file://${__dirname}/index.html`)
win.webContents.openDevTools()
// 处理窗口关闭
win.on('closed', () => {
win = null
})
}
// Electron初始化完成
app.on('ready', createWindow)
// 处理退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})

4. 在index.html中输入

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
node 当前使用的node为<script>document.write(process.versions.node)</script>,
Chrome 为<script>document.write(process.versions.chrome)</script>,
和 Electron 为<script>document.write(process.versions.electron)</script>.
</body>
</html>

5. 测试执行

electron .

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

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

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

electron-packager . --platform=win32

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

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

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

electron 安装的更多相关文章

Electron安装过程深入解析（读完此文解决Electron应用无法启动，无法打包的问题）
1. 安装Electron依赖包开发者往往通过npm install(或 yarn add)指令完成为Node.js工程安装依赖包的工作, 安装Electron也不例外,下面是npm和yarn的安装 ...
Electron安装
1.安装nodejs和npm 官网下载地址:https://nodejs.org/en/download/ 安装包:下载.msi 安装完成后: nodejs.npm都会安装好,path环境变量也自动设 ...
electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动
1.初始化node项目,生成package.json文件 npm init 2.安装electron,并保存为开发依赖项 npm install electron -D 3.根目录下新建index.j ...
electron安装到第一个实例
1.node.js下载,然后安装.下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2.cmd下输入:npm install electron-prebu ...
Electron 安装与使用
Electron是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用本文基于Windows进行开发的过程,记录下来,以便日后使用,Electron官网:https://elec ...
electron安装与使用
系统 WIN10 X64 1. python-2.7.15.amd64.msi 2. node-v10.4.1-x64.msi 3. VS2015 community(社区版) 4. npm conf ...
electron 安装失败解决办法
1.安装node https://nodejs.org/en/download/2.安装镜像工具npm install -g cnpm --registry=https://registry.npm. ...
electron 安装使用
1.安装 node.js 链接:http://pan.baidu.com/s/1o7W7BIy 密码:y6od 一路next 我安装在F:\Program Files\node.js下 2.检查nod ...
为Electron 安装 vue-devtool等扩展
相关代码: https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js 在SPA逐渐成为构建优秀交互体验应 ...

随机推荐

If people in the communications only think about gains and losses of interest, then the pleasure of knowing each other will cease to exist.
If people in the communications only think about gains and losses of interest, then the pleasure of ...
ios获取数据之encodeURI 和 decodeURI
在APP开发过程中,免不了要进行ios的数据处理,在ios传递数据的过程中,会出现JSON数据获取不到的情况,这时候就轮到encodeURI 和 decodeURI出马了. 1.encodeURI,d ...
Android Studio 编译错误 Error:Execution failed for task ':app:buildInfoDebugLoader'.
今天来到打开昨天的项目运行正常,然后改动了一点代码编译报错: Error:Execution failed for task ':app:buildInfoDebugLoader'. > Exc ...
freebsd快速删除磁盘数据
At the start, mark all system disks as empty. Repeat the following command for each hard drive: dd i ...
SaaS 系统架构设计经验总结
2B SaaS系统最近几年都很火.很多创业公司都在尝试创建企业级别的应用 cRM, HR,销售, Desk SaaS系统.很多SaaS创业公司也拿了大额风投.毕竟SaaS相对传统软件的优势非常明显. ...
2017.10.7 QBXT 模拟赛
题目链接 T1 容斥原理,根据奇偶性进行加减 #include<iostream> #include<cstdio> using namespace std; typedef ...
使用JDK自带的VisualVM进行Java程序的性能分析
VisualVM是什么? VisualVM是JDK自带的一个用于Java程序性能分析的工具,JDK安装完毕后就有啦,在JDK安装目录的bin文件夹下能找到名称为jvisualvm.exe. 要使用Vi ...
UVA 10954 Add All 全部相加（Huffman编码）
题意:给你n个数的集合,每次选两个删除,把它们的和放回集合,直到集合的数只剩下一个,每次操作的开销是那两个数的和,求最小开销. Huffman编码.Huffman编码对于着一颗二叉树,这里的数对应着单 ...
爬虫3_python2
# coding=utf-8 import urllib params=urllib.urlencode({'t':1,'eggs':2,'bacon':0})#现在大多数网站都是动态网页,需要你动态 ...
fastjson中转字符串时格式化、显示null值等
fastjson中object转string时的配置项,包括 1. 是否显示value为null的项 2. 是否格式化显示字符串 3. 日期是否格式化显示为可读字符串 ... 这些的配置均在Seria ...

electron 安装

electron 安装的更多相关文章

随机推荐

热门专题