前几天集成的 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项目
- 首先使用 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要修改,具体见这里。
网友评论