前言
来啦老铁！
记得在几年前，有朋友提到一嘴，是关于 Electron 的，当时没太接触也没去了解，现在项目上有使用到 Electron 做跨平台桌面应用，虽然我作为一名测试开发，Electron 的开发知识可以不用太关心，但是既然项目上有用，咱们还是稍作学习吧，同时也给自己扫个盲，欢迎读者来吐槽~
学习路径
- 安装 vue-cli；
- 创建 vue 项目；
- 安装 Electron；
- 编译并启动应用；
- 简单开发一下；
- 打包看看；
1. 安装 vue-cli；
-
命令行工具执行以下命令：
npm install -g @vue/cli
-
安装完成，执行 vue --version 或 vue -V 可看到版本号即可：
安装 vue-cli
2. 创建 vue 项目；
-
命令行工具执行以下命令：
vue create electron-vue-learning
其中 electron-vue-learning 是项目名，请自取。
-
选择项目配置，我们直接选择默认的选项，如：
Vue 3
Use Yarn
-
完成选择后，直接自动开始创建 vue 项目，结果如下：
创建 vue 项目
-
我们用 IDE，如 vscode， 打开项目，项目结构如下：
项目结构
-
先看看 vue 项目是否正常，执行以下命令：
yarn serve
启动 vue 项目
-
浏览器访问 http://localhost:8080/ 即可：
浏览器访问 vue 项目
好的，完美，目前很顺利！接下来我们来看看怎么用 Electron~
3. 安装 Electron；
-
项目根目录下执行命令：
vue add electron-builder
安装 electron-builder
注：electron 版本按默认的最新版本 13.0.0 即可~
4. 编译并启动应用；
安装完 electron-builder 后，项目里的 package.json 中，script 下会增加几行，编译并启动应用的命令这不就来了嘛，懂 Node.js 的都懂~
package.json
-
命令行执行以下命令进行本地编译调试；
yarn electron:serve
本地编译调试
-
我们会看到编译成功、启动 Electron 的提示，并且成功打开桌面应用：
编译成功、启动 Electron
默认会打开开发者工具 devtools，这个跟浏览器的开发者工具是一样的。实际上，我们可以将 Electron 看成是一个特殊的浏览器，没毛病~
-
关闭开发者工具后，样子如下：
Electron
到此为止，一个最原始的 Electron 应用就这么简单的完成了~
5. 简单开发一下；
在这个本地调试模式下，修改代码，保存后则可以在 Electron 上立马得到体现，跟开发网页是一样的效果，非常简单好用，例如我在首页上添加了：This is 狄仁杰666，保存后立马自动编译、生效
简单开发一下
6. 打包看看；
众所周知，yarn electron:serve 通常是本地调试用的命令，而 yarn electron:build 则通常是发布的手打包的命令，我们也来试试~
-
命令行执行命令：
yarn selectron:build
整个过程会比较慢一点，大致需要 2 分钟（其实目前没有过多开发，挺快的）。
-
打包完成；
打包完成
-
查看/验证安装包；
在上图打包完成的日志中，我们清楚的看到打包出了 2 种格式的安装包，一个是 .zip 的，一个是 .dmg，熟悉 macOS 的都知道，懂的都懂~
a. 在对应的文件路径下，我们能找到安装包：
安装包
b. 打开文件系统：
打开文件系统
c. 双击安装包（如 .dmg 文件）进行安装；
这里就能到达我们 macOS 熟悉的安装窗口了~
开始安装
d. 将我们的安装包拖入 “Application” 开始安装~
e. 然后咻的一下，就能在软件列表中看到我们的软件啦~
软件列表中的我们
f. 打开安装好的软件；
打开安装好的软件
嘿，巨简单是不是~
至此，一个简单的桌面应用就这么诞生了，将这样的安装包发布出去，用户不就能安装使用咱们的软件了嘛，顺利得有点怀疑自己了~
今天的学习也该告一段落了，未来有机会咱们再深入玩一玩~
如果本文对您有帮助，麻烦动动手指点点赞？
非常感谢！
网友评论