简单实现vue与electron的集成

最近发现一个叫做electron的框架,能生成windows与mac端的安装文件,里面业务实现是用js的,于是研究了一下.简单写一些集成的过程.

其中node版本是14.18.3

在cmd里执行npm install @vue/cli -g

300多s才安装完毕,真是不快.

之后初始化一个vue的项目

vue create hello-world

我选择的是手工选择.然后选择了常用的模块

我选择的是vue2,主要目前对3不熟

对于vue-router的history这个我是选择的n,一般都是hash模式.

这个我选择的是SASS

默认语法检查，我用的标准的

Line on save表明在保存代码的时候，进行格式检查。

Lint and fix on commit表明在git commit的时候自动纠正格式。

我选择的是Line on save

这里问把 babel, postcss, eslint 这些配置文件放哪,我是放独立文件.

是否为后来的项目保留这些设置？选择“N”。

之后项目就生成完毕.

按照提示

cd hello-world

执行npm run serve 就启动了默认的http://localhost:8080/

在浏览器打开

到了这一步之后,准备集成electron了.

停止应用

然后执行还是在hello-world目录执行vue add electron-builder

选择13.0.0这个最新的版本

安装完毕后,会发现package.json改变了

通过package.json可以发现执行npm run electron:serve 能启动electron的项目,npm run electron:build是生成exe文件等.

执行npm run electron:serve的页面如下

执行npm run electron:build看看是否生成了安装文件.

第一次失败，感觉得用管理员权限运行。

第二次用管理员权限的cmd运行成功

在dist_electron子目录下有了安装文件与解压后的执行文件等

这些exe直接双击就能用了