Electron现在挺火的,官网的标语是使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序。只是没有具体的使用开发项目,所以只是试试创建一个vue项目和用老项目试试能不能打包出来。
新建项目和直接用老项目都试了,查到的有好几种方法,这边就使用一种,觉得比较简单。
创建新的vue项目,这一步就不多说了:
vue create electron-demo
安装electron,没有全局:
npm install electron
很容易报错:
添加模块,这个命令是添加模块,可以去vuecli查一下:
vue add electron-builder
会让你选择,选最高的吧:
这边也是经常报错:
上面的两个步骤总是会报错,用cnpm提示正确了但是也没下载好,重新去执行,然后直接:
npm run electron:serve
如果报错就再重新下载,我是没有一次就安装成功的,不知道是否跟网络有关,执行npm run electron:serve之后要等一等,成功了:
接着就是打包:
npm run electron:build
这边特别的慢,还要下载几个GitHub的压缩文件比如electron-v11.3.0-win32-x64.zip,经常失败,不知道安装的时候-g是不是会好一点。
打包成功:
项目里面多了dist_electron文件,里面的.exe就是客户端了,直接双击就能启动。这边会把生成对应的.exe在C:UsersdellAppDataLocal里面。
如果是老项目一样的命令,先安装electron,再添加打包模块。要开发的话运行npm run electron:serve,然后修改代码,审查元素,也是支持热更新的:
如果用桌面程序,还是有一些要调整的,比如我这项目用的视口宽高就不适应了。
大概就是这样了,Electron有哪些api都没去试就是成功打包出了.exe,具体的API还是得要开发应用的时候才会去好好了解。
(完)