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逐渐成为构建优秀交互体验应 ...
随机推荐
- 缓存List并写入文件持久化
LIfe is half spent before we know what is it. 缓存List并写入文件持久化 需要缓存一个List集合,比如缓存一个输入框中用户之前输入过的内容,下次当用户 ...
- Java定时器Timer,TimerTask每隔一段时间随机生成数字
1:java.util.Timer类是一种工具,线程用其安排以后在后台线程中执行的任务.可安排任务执行一次,或者定期重复执行. 2:TimerTask类是由 Timer 安排为一次执行或重复执行的任务 ...
- 如何在CSS中解决长英文单词的页面显示问题？CSS3
简言 在页面排版中,经常遇到长英文单词溢出段落容器的情况,如何解决该问题?现编制如下对比演示程序: 演示程序 42du.cn-在线演示程序 部分html代码 <div class="b ...
- Android端WebRTC点对点互连
项目准备 信令服务器代码:https://github.com/matthewYang92/WebRtcServer(代码改自ProjectRTC) 安装Node.js 进入项目根目录,命令行:npm ...
- servlet config
<webapp> <!--servlet是指编写的Servlet的路径,以及定义别名--> <servlet> <servlet-name>test&l ...
- iOS Programming Autorotation, Popover Controllers, and Modal View Controllers
iOS Programming Autorotation, Popover Controllers, and Modal View Controllers 自动旋转,Popover 控制器,Moda ...
- 创建XML的用法
注意:在实际开发中,注意createElement().createAttribute().createTextNode().appendchild()等方法的具体使用. // root根节点的属性数 ...
- 【虚拟机-虚拟网络】使用 PsPing & PaPing 进行 TCP 端口连通性测试
PsPing & PaPing 介绍 通常,我们测试数据包能否通过 IP 协议到达特定主机时,都习惯使用 ping 命令.工作时 ping 向目标主机发送一个 IMCP Echo 请求的数据包 ...
- Win10权限问题
通过组策略打开Administrator用户后,Edge.图片查看器等内置程序不能使用,提示“无法使用内置管理员账户打开” 网上的方法: 1.组策略:本地安全策略编辑器——安全设置——本地策略——安全 ...
- POJ 2288 Islands and Bridges （状压DP，变形）
题意: 给一个无向图,n个点m条边,每个点有点权,要求找到一条哈密顿路径,使得该路径的f(path)值最大.输出f值,若有多条最大f值的路径,输出路径数量. f值由如下3点累加而来: (1)所有点权之 ...