Electron介绍
简单点说，Electron就是把你的网页封装成桌面应用程序。那有人就说直接访问网站不就行了。这样说也没错，不过用浏览器访问网页还是有一定的局限性的，很多权限会受到限制：比如遍历文件夹、弹出系统对话框、后台常驻，调用动态链接库等浏览器都做不到。而且以前我开发桌面应用程序用过PyQt5——难用且难看；C#——非原生跨平台；怎么整都不尽人意，所以我开始使用Electron了~
网上的Electron教程很多，但在联合Vue实际开发中，遇到了N多的BUG，所以我决定有必要写一篇来助大家快速必坑入门。
基本环境
Windows10专业版20H2.19042.508
Python 3.6.8
Node.js 12.18.3
npm 6.14.6
yarn 1.22.10
Electron 11.2.3
Vue CLI 4.5.11
开始开发
Vue项目的创建
1 | vue create my_electron |
按照自己喜好选择组件，这里我选择了Router和Vuex
安装vue-cli-plugin-electron-builder
参考链接：Vue CLI Plugin Electron Builder Quick Start
1 | cd my_electron |
期间会让你选择Electron版本，我选择的是最新的11版本。
运行electron
然后执行
1 | yarn electron:serve |
就可以运行啦，你可能会看到如下错误
这是因为我们无法访问谷歌应用商店引起的，我已经替你下载好这个插件了，访问这里下载然后解压到%APPDATA%\my_electron，注意直接解压整个extensions文件夹到此目录。如果你的项目名不是my_electrion替换它即可，然后重新启动Electron就好啦。
构建可执行文件
执行
1 | yarn electron:build |
就在项目文件夹下的dist_electron\win-unpacked目录生成了目标程序。
