electron 初体验--极致详细

花小宝
131 阅读3分钟

electron 用于 web端桌面应用程序搭建，不再进行其他过多赘述。

一、环境准备

electron 环境准备工作：

1、node js 安装 版本 在 16 往上走即可

本次使用的node 版本为 16.20.0

2、npm (安装好node 即可，无需太多关注，正常使用即可)

常用的两个东西：

nvm --- 方便切换不同版本的 node

//常用命令
nvm ls  //--查看已安装的 node 版本

nvm use <node 版本号>  //--版本切换命令

nrm --- npm 镜像源切换工具

//常用命令
nrm ls  //--查看 npm 镜像源

nrm use <镜像源名字>  //--镜像源切换命令

3、 electron 的一些设置

在项目中需要用到 electron 依赖，但是在安装的过程中，因为包过大，而导致下载速度极慢，甚至没有反应，因此我们需要做一些调整。

（1） 配置好电脑的环境变量，右键电脑 属性，找到系统环境变量，然后在系统环境变量中添加上这两个东西

image.png

环境变量：

ELECTRON_CUSTOM_DIR 值：{{ version }}

ELECTRON_MIRROR 值：https://npmmirror.com/mirrors/electron/

4、请注意，项目路径不要使用任何中文，否则 electron 会有问题，举例：比如在 E 盘中 新建一个名字叫 项目的文件夹，然后把项目放在该目录下，这是不可以的，项目绝对路径中不要有中文。

二、vue 项目初始化

1、使用脚手架创建一个 vue 的初始项目 vue create my-electron

2、运行项目，看正常的 vue 项目是否能启动成功。

三、集成 electron

1、安装 electron

npm i electron

2、安装 electron-builder 使用命令 vue add electron-builder 不要用 npm

3、修改配置文件，在第2步完成之后，会在 src 文件夹下面多出一个 background.js 文件，因为网络原因，导致 在运行的时候调试工具加载不出来，程序加载不了，为了保证程序运行起来，我们找到 installExtension,进行注释。

具体注释这一行：await installExtension(VUEJS_DEVTOOLS); 

app.on("ready", async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      // await installExtension(VUEJS_DEVTOOLS);  注释这行即可
    } catch (e) {
      console.error("Vue Devtools failed to install:", e.toString());
    }
  }
  createWindow();
});

四、启动 electron 程序

1、查看 package,json文件命令行

找到脚本


  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "electron .",
    "electron:build": "vue-cli-service electron:build", //打包命令
    "electron:serve": "vue-cli-service electron:serve", //启动 electron 命令
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },

2、启动 electron

运行 npm run electron:serve

3、运行之后会出现这个界面，即代表成功了

image.png

五、electron 打包初体验 1、根目录下添加镜像源文件，防止打包的时候，下载不了 electron 文件

文件名：.npmrc

内容：

electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

2、运行打包命令

npm run electron:build

3、打包完成之后，查看 根目录下的 dist_electron 文件夹，会多出来一些东西，我们着重关注 my-electron Setup 0.1.0.exe 文件，该文件就是我们打包出来之后的 exe 文件，用于程序的安装。

image.png

六、程序安装

1、双击 第五步中的 my-electron Setup 0.1.0.exe 文件，直接一步安装即可，这里默认就直接安装到 C 盘，这个不用管，后续是可以手动指定安装目录的，我们这里只做演示。

2、安装完成之后，桌面上会多一个图标

image.png

3、双击图标，即可打开我们的程序。

七、程序卸载

1、点击桌面程序图标，右键鼠标，点击打开文件所在位置，即可看到如下目录

image.png

2、找到 文件名为 Uninstall my-electron.exe 程序，双击即可将我们安装的程序进行卸载。

总结：通过这个小案例演示，体验了一下 electron 简单的开发，之前没怎么接触过 electron, 一头雾水，网上小资料千篇一律吧，拼拼凑凑的，终于是运行起来了。

关于 electron 之前看到的文章，都是通过 electron 的脚手架来进行项目初始化的，有用 electron-builder 自己组装的，但是文章内容也不全，这里算做个全过程的小记录吧。

★,°:.☆(￣▽￣)/$:.°★ 完结!。

avatar
文章
阅读
粉丝