安装使用electron辛路历程
成功安装electron以及成功使用第一个应用,整整花费了我一整天的时间,各种百度,各种尝试。最终,终于总结了一个亲测可行的终极可执行方案:
electron 简单介绍:
实现:HTML/CSS/JS桌面程序,搭建跨平台桌面应用。
electron 官方文档:
使用步骤:
- 下载并安装node.js
- 检查node.js和npm是否安装成功
- 下载electron【这里需要注意:如果在线安装不行的话,直接离线下载安装】
- 安装electron或直接使用
- 编写第一个应用——基于electron的二次开发
-
下载并安装node.js
从node.js官网 https://nodejs.org/en/ 下载>=4.x版本的node.js,并修改环境变量PATH。新手请自行百度:node.js安装。
-
检查node.js和npm是否可以安装成功
在cmd命令行执行:
node -v
npm -v
若不报错,则安装成功。
-
下载electron
参考官网安装指南:https://electronjs.org/docs/tutorial/installation
- npm在线安装:
cmd命令行下执行:
- npm install electron -g【加g是全局安装,自动添加到环境变量中】
- 检查是否安装成功:输入electron回车,出现一个类似浏览器的工具,直接拖进去一个网页即可
- cd 你的项目路径
- electron .\
即可。
这时候,你可能会遇到各种报错,以下是我尝试过的各种解决办法,如下参考:
- 使用淘宝镜像 npm install -g electron --registry=https://registry.npm.taobao.org
- 先安装cnpm,再使用cnpm安装electron
但是!!!
……对我来说上面这些解决办法都没有用,最后直接使用:官网下载electron.zip
- 离线安装:
【下载适合自己平台等的压缩包文件】
-
安装或者直接使用
- 如果上面的在线安装没有出现错误提示,那么可以直接使用
在cmd命令行直接 electron .\(你编写的应用的那个文件夹下执行)。
- 离线安装的:
进入你安装的离线包的目录下,找到electron.exe,然后cmd窗口执行:electron.exe 你项目的路径,即可。
- 参考链接:
- https://jingyan.baidu.com/album/9225544671aecf851648f484.html?picindex=2
- https://www.cnblogs.com/zhangym/p/6113534.html
- 编写第一个应用——基于electron的二次开发
- 怎么做?
- (如果网络正常,且没有限制)
- 克隆electron快速开始的源: git clone https://github.com/electron/electron-quick-start
- 进入到electron快速开始的文件夹: cd electron-quick-start
- 安装依赖 :npm install
- 运行APP:npm start
- 在此基础上可以进行二次开发
2. (如果网络有限制或者不能正常下载的)
- 增加淘宝源npm install --registry https://registry.npm.taobao.org
- 下载下来项目后,npm i后会下载npm的相关依赖,electron下载不下来的,可以去官网 https://npm.taobao.org/mirrors/electron 下载相应的压缩包,解压后放在目录 xxx\electron-quick-start\node_modules\electron\dist 目录下,然后执行npm i —> npm start即可 。这是花费整整一天总结下来的经验,经过无数次的尝试,啊啊啊,绝对有效!!!
- electron与vue联调
1. 打包
将vue编写好的代码,使用npm命令进行打包,替换掉electron里面的index.html文件。
2. 直接在vue项目中修改
使用electron-vue框架,将electron与vue进行融合,直接使用
3. 同时开两个服务
对于vue项目,直接使用命令:npm run dev开启服务后,修改electron项目中的main.js文件中的加载app的路径,然后在electron项目中国,执行electron .,开启第二个服务:
1 // and load the index.html of the app. 2 mainWindow.loadURL('http://xxx.xxx.xxx.xx:3101/#');
编写第一个应用:
- electron应用的目录结构大体上分为三个文件:package.json main.js index.html。
- package.json文件:主要用来描述我们的electron项目的一些信息;
- index.html文件:也就是我们的网页文件,即要用来打包为桌面应用的文件;
- main.js文件:用于创建窗口,把网页ui放到窗口里面,同时处理系统时间。
- package.json 文件:
name:项目名称;vision:项目版本;main:表示我们的应用的启动脚本,它运行在主进程上
1 { 2 "name" : "electron-app", 3 "version" : "0.1.0", 4 "main" : "main.js" 5 }
- main.js 文件:
1 var electron = require('electron'); 2 var app = electron.app; 3 4 var BrowserWindow = electron.BrowserWindow; // 创建原生浏览器窗口的模块 5 6 // 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC, 7 // window 会被自动地关闭 8 var mainWindow = null; 9 10 // 当所有窗口被关闭了,退出。 11 app.on('window-all-closed', function() { 12 // 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前 13 // 应用会保持活动状态 14 if (process.platform != 'darwin') { 15 app.quit(); 16 } 17 }); 18 19 // 当 Electron 完成了初始化并且准备创建浏览器窗口的时候 20 // 这个方法就被调用 21 app.on('ready', function() { 22 // 创建浏览器窗口。 23 mainWindow = new BrowserWindow({width: 800, height: 600}); 24 25 // 加载应用的 index.html 26 mainWindow.loadURL('file://' + __dirname + '/index.html'); 27 28 // 打开开发工具 29 mainWindow.openDevTools(); 30 31 // 当 window 被关闭,这个事件会被发出 32 mainWindow.on('closed', function() { 33 // 取消引用 window 对象,如果你的应用支持多窗口的话, 34 // 通常会把多个 window 对象存放在一个数组里面, 35 // 但这次不是。 36 mainWindow = null; 37 }); 38 });
- index.html文件:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Hello World!</title> 5 </head> 6 <body> 7 <h1>Hello World!</h1> 8 We are using io.js <script>document.write(process.version)</script> 9 and Electron <script>document.write(process.versions['electron'])</script>. 10 </body> 11 </html>
- 执行命令:
E:\electron\electron-v3.0.8-win32-x64>electron.exe F:\Projects2\electron_app