最近发现一个叫做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直接双击就能用了