前言

目前将Vue和Electron结合的常用方案是Vue CLI Plugin Electron Builder和electron-vue。因为electron-vue已停止更新，而且Vue CLI Plugin Electron Builder的下载量远高于electron-vue，使用的更多。所以我们将基于Vue CLI Plugin Electron Builder来介绍如何把Vue引入Electron工程中。

快速开始（默认已经安装好node和npm）

第一步：创建vue项目

首先，安装：npm i @vue/cli -g 检查是否安装成功

接着，创建项目：vue create test-demo

配置选择Vue2默认版本后，安装完成。想使用vue3的 也可以选择vue3选项。

第二步：安装vue-cli-plugin-electron-builder

进入项目

cd test-demo

导入test-demo

点击插件，并添加插件

搜索vue-cli-plugin-electron-builder,勾选，点击安装

安装vue-cli-plugin-electron-builder完成后，一定要点击  ‘完成安装’

点击安装完成后，需要等一段时间，会重新构建项目架构； 

在这个过程中，由于网络的原因，Electron可能会安装失败，这时候如果node_modules文件夹中已经有electron文件夹（该文件夹是不完整的electron包，不能运行），那么删除这个文件夹，然后可以使用npm重新electron

第三步：用编辑器打开创建好的项目

在原来vue-cli目录架构上会生成electron 相关的入口文件和构建命令

第四步：验证安装成果，让项目跑起来并能成功打包

npm run electron:serve

注意：命令行显示 Launching Electron...需要等待一段时间，心急吃不到热豆腐

出现一个问题：Vue Devtools failed to install :Error:net::ERR_CONNECTION_TIMED_OUT

这个问题很可能是由于没有安装vue devtools

到这搭建的基于vue的electron项目就成功跑起来了，是不是很开心啦，hahaha~~~

修改App.vue中msg的内容修改为Hello World：

保存一下，发现可以正常热更新渲染

运行没有问题，我们再试一下打包命令：

先CTRL + C停止项目

然后运行npm run electron:build

需要一段时间，贴出来命令行的样子

重点是最后一行：
build complete!

构建完成后，看一下打包目录 dist_electron

其中：
test-demo setup 0.1.0.exe就是安装程序
win-unpacked 从字面意思就可以知道是win环境下没有被打包的（绿色免安装包）

第五步：验证exe安装程序和绿色免安装程序

1、先试一下免安装包

helloworld出来了，没有问题

2、试一下，exe安装程序

双击安装：

hello world出来了没有问题

此时，回到桌面，会发现多了一个快捷方式

通过快捷方式，我们可以找到安装位置

如果要卸载的话，就双击Uninstall test-demo

总结

本文只是简单的分享 electron 桌面应用的项目创建，没什么深度，想要真正开发应用需要大家一起爬坑~~~

顺便分享一下相关文档链接，以便大家开发使用：

vue-cli-plugin-electron-builder
www.electronjs.org/zh/
www.electron.build/