安装使用electron辛路历程

时间 2019-11-12

标签安装使用 electron 历程繁體版

原文原文链接

安装使用electron辛路历程

成功安装electron以及成功使用第一个应用，整整花费了我一成天的时间，各类百度，各类尝试。最终，终于总结了一个亲测可行的终极可执行方案：
html

electron 简单介绍：

　　实现：HTML/CSS/JS桌面程序，搭建跨平台桌面应用。vue

electron 官方文档：

https://electronjs.org/docsnode

使用步骤：

下载并安装node.js
检查node.js和npm是否安装成功
下载electron【这里须要注意：若是在线安装不行的话，直接离线下载安装】
安装electron或直接使用
编写第一个应用——基于electron的二次开发

下载并安装node.js

　　从node.js官网 https://nodejs.org/en/ 下载>=4.x版本的node.js，并修改环境变量PATH。新手请自行百度：node.js安装。git

检查node.js和npm是否能够安装成功

　　在cmd命令行执行：github

　　node -v
　　npm -vnpm

　　若不报错，则安装成功。json

下载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　　

离线安装：

【下载适合本身平台等的压缩包文件】

淘宝镜像：https://npm.taobao.org/mirrors/electron/
GitHub：https://github.com/electron/electron/releases

安装或者直接使用

若是上面的在线安装没有出现错误提示，那么能够直接使用

在cmd命令行直接 electron .\(你编写的应用的那个文件夹下执行)。

离线安装的：

进入你安装的离线包的目录下，找到electron.exe，而后cmd窗口执行：electron.exe 你项目的路径，便可。

参考连接：

编写第一个应用——基于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

安装使用electron辛路历程