0%

Electron&Vue开发记录(一):搭建基本环境

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

图1:用Vue-CLI创建项目

安装vue-cli-plugin-electron-builder

参考链接:Vue CLI Plugin Electron Builder Quick Start

1
2
cd my_electron
vue add electron-builder

期间会让你选择Electron版本,我选择的是最新的11版本。

运行electron

然后执行

1
yarn electron:serve

就可以运行啦,你可能会看到如下错误

图2:用Vue-CLI创建项目

这是因为我们无法访问谷歌应用商店引起的,我已经替你下载好这个插件了,访问这里下载然后解压到%APPDATA%\my_electron,注意直接解压整个extensions文件夹到此目录。如果你的项目名不是my_electrion替换它即可,然后重新启动Electron就好啦。
图3:启动好后的Electron

构建可执行文件

执行

1
yarn electron:build

就在项目文件夹下的dist_electron\win-unpacked目录生成了目标程序。