今早看到有大佬评论，所以就研究了一下vue-cli3.0+electron的桌面应用开发
image.png
首先感谢@素笺淡墨染流年！
首先，去看了一下vue-cli-plugin-electron-builder的介绍，网址
image.png
大概意思就是：
1、这个vue-cli3.0的插件针对Electron，不用其他配置，用electron-builder进行构建就ok了
2、你的应用以后必须要用vue-cli3.0来创建了，2.0要淘汰了
PS：150分的英语只能考75分的水平，也只能翻译到这个地步了
快速开始
第一步：用vue-cli3.0创建一个项目
打开命令行工具
vue create demo
选择默认
image.png
安装完成
image.png
第二步：安装vue-cli-plugin-electron-builder
进入项目
cd demo
进入vue项目管理器：
vue ui
导入demo
image.png
点击插件，并添加插件
image.png
搜索vue-cli-plugin-electron-builder,勾选，安装
image.png
安装完成后，点击“安装完成”，（必须要点击安装完成，否则项目架构会出问题）
点击安装完成后，需要等一段时间，会重新构建项目架构
第三步：用编辑器打开创建好的项目
image.png
第四步：看一下package.json
image.png
运行命令和构建命令，我们试一下
先运行让项目跑起来：
npm run electron:serve
image.png
注意：命令行显示 Launching Electron...需要等待一段时间，心急吃不到热豆腐
出现一个问题：
Vue Devtools failed to install :Error:net::ERR_CONNECTION_TIMED_OUT
这个问题很可能是由于没有安装vue devtools
欢迎关注我后续文章，我会在后续文章里面研究关于Electron安装vue devtools
修改App.vue中msg的内容修改为Hello World：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Hello World"/>
</div>
</template>
保存一下，发现前端正常渲染
image.png
运行没有问题，我们再试一下构建命令
先CTRL + C停止项目
然后运行
npm run electron:build
需要一段时间，贴出来命令行的样子
D:\Electron\demo>npm run electron:build
> demo@0.1.0 electron:build D:\Electron\demo
> vue-cli-service electron:build
INFO Bundling render process:
| Building modern bundle for production...
DONE Compiled successfully in 12007ms 7:06:54 PM
File Size Gzipped
dist_electron\bundled\js\chunk-vendors 65.14 KiB 23.43 KiB
.2026470a.js
dist_electron\bundled\js\app.10f792b9. 4.55 KiB 1.63 KiB
js
dist_electron\bundled\css\app.e2713bb0 0.33 KiB 0.23 KiB
.css
Images and other types of assets omitted.
DONE Build complete. The dist_electron\bundled directory is ready to be deploy
ed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployme
nt.html
- Bundling main process...
DONE Compiled successfully in 8595ms 7:07:03 PM
File Size Gzipped
dist_electron\bundled\background.js 160.44 KiB 49.67 KiB
Images and other types of assets omitted.
INFO Building app with electron-builder:
• electron-builder version=20.44.4
• description is missed in the package.json appPackageFile=D:\Electron\demo\di
st_electron\bundled\package.json
• author is missed in the package.json appPackageFile=D:\Electron\demo\dist_el
ectron\bundled\package.json
• writing effective config file=dist_electron\builder-effective-config.yaml
• no native production dependencies
• packaging platform=win32 arch=x64 electron=5.0.0 appOutDir=dist_electr
on\win-unpacked
• default Electron icon is used reason=application icon is not set
• building target=nsis file=dist_electron\demo Setup 0.1.0.exe archs=x6
4 oneClick=true perMachine=false
�[34m • �[0mdownloading �[34mparts�[0m=1 �[34msize�[0m=1.4 MB �[34murl�[0m=
https://github.com/electron-userland/electron-builder-binaries/releases/download
/nsis-3.0.3.2/nsis-3.0.3.2.7z
�[34m • �[0mdownloaded �[34mduration�[0m=1m0.625s �[34murl�[0m=https://git
hub.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.3
.2/nsis-3.0.3.2.7z
�[34m • �[0mdownloading �[34mparts�[0m=1 �[34msize�[0m=1.0 MB �[34murl�[0m=
https://github.com/electron-userland/electron-builder-binaries/releases/download
/nsis-resources-3.3.0/nsis-resources-3.3.0.7z
�[34m • �[0mdownloaded �[34mduration�[0m=1m28.414s �[34murl�[0m=https://gi
thub.com/electron-userland/electron-builder-binaries/releases/download/nsis-reso
urces-3.3.0/nsis-resources-3.3.0.7z
• building block map blockMapFile=dist_electron\demo Setup 0.1.0.exe.blockmap
DONE Build complete!
重点是最后一行：
build complete!构建完成！
image.png
构建完成后，看一下目录
image.png
文件夹dist_electron就是构建文件所在的文件夹，我们找到文件夹打开看一下
image.png
其中：
demo setup 0.1.0.exe就是安装程序
win-unpacked 从字面意思就可以知道是win环境下没有被打包的（绿色免安装包）
验证安装程序和绿色免安装程序
1、先试一下免安装包
image.png
双击demo打开
image.png
helloworld出来了，没有问题
2、试一下，安装程序
image.png
双击安装
image.png
没有问我们安装位置，也没有问是不是要创建快捷方式，很简单粗暴的就安装了，而且安装完后直接打开
image.png
hello world出来了没有问题
此时，回到桌面，会发现多了一个快捷方式
image.png
就是我们刚才安装的
通过快捷方式，我们可以找到安装位置
C:\Users\Administrator\AppData\Local\Programs\demo\demo.exe进去看看
image.png
如果要卸载的话，就双击Uninstall demo，或者用其他软件管理工具
image.png
我用的是腾讯管家
结束语
我们在安装其他软件的时候，通常会有64位、32位的选择，通常会有问询安装路径，问询是否需要生成快捷方式，问询安装完成立即打开
另外，我们想修改一下快捷方式的图标，应用程序的名称，该如何操作呢？
关注我，我会在后续贴出关于DIY打包的帖子
应用程序打包的文章已经出来了
在vue-cli-plugin-electron-builder下用electron:build打包或生成应用程序的两种方法
也不知道求一波打赏会不会被打死~
