Electron + Vue3 集成记

前几天集成的 Electron + Vue（见这里） ，使用的脚手架是 webpack ，集成的Vue是 2.x 旧版的。本着要追上时代的步伐的想法，今天来集成最新版 Electron + Vue。

集成效果图

一、开发环境的准备

1、安装 Node.js 坏境

从 node.js 官网地址 下载直接安装即可。

2、安装 Vue Cli（安装慢的话，建议使用淘宝镜像cnpm替代npm）

npm install @vue/cli -g
npm install @vue/cli-service -g

3、全局安装 Electron

npm install -g electron

4、查看是否安装成功 :

C:\>node -v
v16.6.2

C:\>vue -V
@vue/cli 4.5.13

C:\>electron -v

v13.1.9

二、搭建vue项目

1. 首先使用 vue-cli 搭建基础 vue框架

C:\>vue create vue-demo

到下面这一步，Vue3选默认的第二项，或者选手动配置的第三项。默认的第二项没有 Vue-Router 和 Vuex，所以这里要选第三项：

接下来的，就看自己的需要，不过“Progressive Web App (PWA) Support”选了会报错，不要选。

最后，选 Vue的版本，选 3.x ，之后看自己要求选，没有要去就一路回车。

2、到vue-demo目录下，执行：

C:\vue-demo>npm run serve

 DONE  Compiled successfully in 4453ms                                                                     上午2:39:20

 I  Your application is running here: http://localhost:8080

浏览器打开http://localhost:8080
此时显示的是

至此，搭建vue成功。

三、集成 Electron

我们使用 “Vue CLI Plugin Electron Builder” 来集成Electron，只需要一步：

# 在项目下命令行执行
vue add electron-builder

安装完成后，我们打开开发服务器：

npm run electron:serve

将项目打包成exe，可以使用下面的命令：

npm run electron:build

---

至此，搭建最新版的Electron+vue成功了，当然，最后还有几个bug要修改，具体见这里。