Electron 5.x + Vue Cli 3.x + Vue 2.x + Vue CLI Plugin Electron Builder 构建桌面应用程序

Node 安装

Node.js 版本要求 12.0.0 以上，Electron 官方文档： https://electronjs.org/releases/stable 有明确指出。

Node.js 官网：https://nodejs.org/en/
Node.js 中文网：http://nodejs.cn/

Yarn 安装

Electron 官方推荐 yarn 作为软件包管理器。

Yarn 官网：https://yarnpkg.com/
Yarn 中文网：https://yarn.bootcss.com/
Yarn Github地址：https://github.com/yarnpkg/yarn

@vue/cli 安装

@vue/cli 安装命令，更多细节看 Vue CLI

yarn global add @vue/cli

查看版本

本次演示已安装好的工具

1.png

创建一个项目

更多细节看 Vue CLI

vue create demo  // demo 项目名称

耐心等待完成

2.png

成功后可在对应的电脑盘看到项目文件，可通过以下命令把项目跑起来：

yarn serve

放上演示截图

3.png

4.png

Electron 安装

首先，我们需要借助 Vue CLI Plugin Electron Builder，更多细节请看文档。
运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器：

vue add electron-builder

中间会有让你选择Electron Version，选择最新的5.0.0即可，以下是成功后的截图。

5.png

可以看到项目结构

6.png

package.json 比起vue-cli 2.x真的简洁太多了

7.png

启动开发服务器

yarn electron:serve

image.png

Electron 一个桌面应用程序成功运行起来了，可以尽情地开发了。

image.png

打包命令

yarn electron:build

最后

第一次在上发表文章，如有不足之处，请多多指教！
后续会继续分享 Electron 使用过程中遇到的各种问题的解决经验。