首页 Electron

# 说在前面

Electron 是一种使用编写网页的技术作为桌面端程序的一项技术，可以理解为使用网页作为界面的应用程序。优点在于跨平台 ( Windows 、 Linux 、 MacOS )、能够使用现代的网页前端技术、简单美观的网页样式。但是其最终编译结果文件尺寸较大，即使是只有一个空网页最终整个包也有 180MB+。系列文章将以 Vue2 作为框架以 Vuetify 作为前端主题

# 相关资源

  • Electron 中文文档
  • cnpm
  • node.js 中文文档
  • Vuetify

# 新建项目

# 安装 node.js

node.js 下载网址 一路按 next 就好
验证是否安装成功可以打开任意终端窗口，输入 node -v 来查看是否安装成功
node版本验证

# 更换 npm 镜像 / 安装 cnpm

由于 Electron 本体依赖在墙外，国内生拉速度很慢，需要使用全局代理或是国内镜像代理，前者毫无疑问是没问题的，这里介绍后者。使用淘宝镜像可以解决大部分包下载缓慢的问题，但是在安装 electron 时虽然下载 node 依赖很快，但是本体下载速度缓慢的问题依旧，经过在网上搜索，提到了使用 cnpm 替代 npm 安装包的方法，经过测试可以满速下载。

  1. 在终端输入 npm install -g cnpm --registry=https://registry.npmmirror.com 来全局安装 cnpm
  2. 验证 cnpm 是否安装成功，同样输入 cnpm -v
1
2
3
4
5
6
7
8
9
PS E:\Code\example> cnpm -v
cnpm@7.1.0 (C:\Users\Admin\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.15 (C:\Users\Admin\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@16.14.0 (C:\Program Files\nodejs\node.exe)
npminstall@5.3.1 (C:\Users\Admin\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\Program Files\nodejs\node_global
win32 x64 10.0.19044
registry=https://registry.npmmirror.com
PS E:\Code\example>

# 安装 vue-cli

vue-cli 是 vue 的脚手架，能够快速构建一个 vue 项目

  1. 在终端输入 npm install -g @vue/cli
  2. 验证安装是否正常 vue -V
1
2
PS C:\Users\Admin> vue -V
@vue/cli 4.5.15

# 创建项目

  1. 创建一个空文件夹，进入这个文件夹，并按 Shift+右键 选择 在此处打开 PowerShell 窗口 或选择 在 Windows 终端 中打开
  2. 输入 vue create 应用名称
  3. 此处提示选择 vue 的版本以及组件，按下键到第三个，按回车进入
1
2
3
4
5
Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features
  1. 接下来是组件选择，按空格键勾选。选择上 Router 与 vuex 这两个常用组件，按回车确认
1
2
3
4
5
6
7
8
9
10
11
12
13
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
  1. 之后是 vue 版本选择，按照习惯我选了 vue2
  2. 之后是路由导航模式，提示选择历史模式还是 hash 模式，两者最大的区别就在于网页的网址，hash 模式会使网址后多一个 # ，比如 http://www.abc.com/#/hello ，两者的其他区别以及优缺点自行百度。这里选择使用历史模式
  3. 接下来是 ESLint 以及代码格式化的设置， ESLint 是一个 JS 语法检查工具。此处选择第三个
  4. 之后是问何时进行代码语法检查，选择第一个 保存时检查
  5. 之后是 ESLint 等配置文件放在哪里，选择第一个 独立位置
  6. 最后是询问是否将这份配置保存以便后续新建项目时快速套用，默认是 N ，输入 y 之后会问你这个配置的名称，之后你再输入 vue create 时就能看见这个设置了

# 安装 Electron

在终端输入 cnpm i -D electron@latest ，如果使用了 npm 而且没有使用全局代理的话，安装过程会十分缓慢

1
2
3
4
5
6
7
PS E:\Code\example> cnpm i -D electron@latest
√ Installed 1 packages
√ Linked 81 latest versions
[1/1] scripts.postinstall electron@latest run "node install.js", root: "E:\\Code\\example\\node_modules\\_electron@17.0.0@electron"
[1/1] scripts.postinstall electron@latest finished in 11s
√ Run 1 scripts
√ All packages installed (86 packages installed from npm registry, used 13s(network 3s), speed 332.93KB/s, json 81(611.68KB), tarball 243.29KB)

# 安装 electron-builder 插件

1
vue add electron-builder

此处会询问你 Electron 的版本，截止到这个文章写完时， Electron 的版本已经到 17.0.0 ，所以选择最高的 13.0.0 即可

# 安装 vue-cli-plugin-vuetify 插件

1
vue add vue-cli-plugin-vuetify

此处会询问你 Vuetify 的版本，选择 Default (recommended) 的即可

# 启动项目

1
npm run electron:serve

不出意外 Electron 窗口会自己弹出来，效果如下
Electron窗口

# 结束

到此为止，项目已经成功新建，可能你会遇到窗口一直加载不出来的问题，一般是因为企图加载 vue devtool 的原因，而这个浏览器插件需要从谷歌应用商店下载。解决这个问题注释掉以下代码即可
file