使用vue-cli3.0+Electron开发桌面应用

自从接触到了electron这个东西，我就遇到了各种各样的问题。

于是在解决这些问题的过程中，我逐渐发现原生的electron遇到的一些问题，上网上去搜，确实可以找到。但是找到的
主语却不一样，都是vue-electron。原生的electron问题和解决办法确实是少啊。。

所以我决定去学习一下用vue去开发electron该怎么做
这是我从网上找到的比较靠谱的博主写的文章（我自己已经动手试过，并且成功了）
上链接
https://www.jianshu.com/p/dfcf2a6a497c

我总结了一下

第一步，用vue-cli3.0创建一个项目

打开命令行工具

vue ui

配置成功后是这样的

1635145066.png

第二步，安装vue-cli-plugin-electron-builder

点击插件，并添加插件

1635145546.png

安装完成后，点击“安装完成”，（必须要点击安装完成，否则项目架构会出问题）

点击安装完成后，需要等一段时间，会重新构建项目架构

第三步：用编辑器打开创建好的项目,看一下package.json

1635147166.png

如果有图中这两个组件在，就代表安装成功了

运行命令和构建命令，我们试一下

先运行让项目跑起来：

npm run electron:serve

注意：命令行显示 Launching Electron...需要等待一段时间，心急吃不到热豆腐

1635146088.png

运行没有问题，我们再试一下构建命令

先CTRL + C停止项目
然后运行

npm run electron:build

需要一段时间，贴出来命令行的样子

 INFO  Bundling render process:

|  Building modern bundle for production...

 DONE  Compiled successfully in 1281ms                                                                      上午10:33:34

  File                                                  Size                           Gzipped

  dist_electron\bundled\js\chunk-vendors.162e033e.js    107.02 KiB                     36.39 KiB
  dist_electron\bundled\js\app.920eeebf.js              6.10 KiB                       2.25 KiB
  dist_electron\bundled\js\about.05861e68.js            0.44 KiB                       0.31 KiB
  dist_electron\bundled\css\app.e84542c5.css            0.42 KiB                       0.26 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist_electron\bundled directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

/  Bundling main process...

 DONE  Compiled successfully in 509ms                                                                       上午10:33:34

  File                                   Size                                  Gzipped

  dist_electron\bundled\background.js    199.02 KiB                            61.61 KiB

  Images and other types of assets omitted.

 INFO  Building app with electron-builder:
  • electron-builder  version=22.13.1 os=10.0.19042
  • description is missed in the package.json  appPackageFile=D:\QMDownload\nihao\dist_electron\bundled\package.json
  • author is missed in the package.json  appPackageFile=D:\QMDownload\nihao\dist_electron\bundled\package.json
  • writing effective config  file=dist_electron\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=13.0.0 appOutDir=dist_electron\win-unpacked
  • default Electron icon is used  reason=application icon is not set
  • building        target=nsis file=dist_electron\nihao Setup 0.1.0.exe archs=x64 oneClick=false perMachine=false
  • building block map  blockMapFile=dist_electron\nihao Setup 0.1.0.exe.blockmap
 DONE  Build complete!

重点是最后一行：

build complete!构建完成！

构建完成后，看一下目录

1635146569.png

其中：
nihao setup 0.1.0.exe就是安装程序
win-unpacked 从字面意思就可以知道是win环境下没有被打包的（绿色免安装包）

验证安装程序和绿色免安装程序

1、先试一下免安装包

1635146826.png

双击demo打开

1635146088.png

成功打开，没有问题

2、试一下，安装程序

1635210334(1).png

双击安装（这张图片是那位原作者的，因为我已经安装过了）

1635147430.png

没有问我们安装位置，也没有问是不是要创建快捷方式，很简单粗暴的就安装了，而且安装完后直接打开

1635147535.png

打开后显示正常，没有问题
此时，回到桌面，会发现多了一个快捷方式

1635147646.png

就是我们刚才安装的
通过快捷方式，我们可以找到安装位置
C:\Users\admin\AppData\Local\Programs\nihao\nihao.exe
进去看看

1635147851.jpg

如果要卸载的话，就双击Uninstall demo，或者用其他软件管理工具

1635209699.png

我用的是腾讯管家

结束语：
我们在安装其他软件的时候，通常会有64位、32位的选择，通常会有问询安装路径，问询是否需要生成快捷方式，问询安装完成立即打开
另外，我们想修改一下快捷方式的图标，应用程序的名称，该如何操作呢？
关注我，我会在下一篇文章中给大家更新···

以上就是使用vue-cli3.0+Electron开发桌面应用的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~