Electron+Vue入门（二）vue-cli3.0+electron项目初始化

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

打开命令行工具

vue create demo

选择默认

安装完成

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

进入项目

cd demo

进入vue项目管理器：

vue ui

导入demo

点击插件，并添加插件

搜索vue-cli-plugin-electron-builder,勾选，安装

安装完成后，点击“安装完成”，（必须要点击安装完成，否则项目架构会出问题）
点击安装完成后，需要等一段时间，会重新构建项目架构

第三步：用编辑器打开创建好的项目

第四步：看一下package.json

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

先运行让项目跑起来：

npm run electron:serve

注意：命令行显示 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>

保存一下，发现前端正常渲染

运行没有问题，我们再试一下构建命令
先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!构建完成！

构建完成后，看一下目录

文件夹dist_electron就是构建文件所在的文件夹，我们找到文件夹打开看一下

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

验证安装程序和绿色免安装程序
1、先试一下免安装包

双击demo打开

helloworld出来了，没有问题
2、试一下，安装程序

双击安装

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

hello world出来了没有问题
此时，回到桌面，会发现多了一个快捷方式

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

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

我用的是腾讯管家

结束语
我们在安装其他软件的时候，通常会有64位、32位的选择，通常会有问询安装路径，问询是否需要生成快捷方式，问询安装完成立即打开
另外，我们想修改一下快捷方式的图标，应用程序的名称，该如何操作呢？
关注我，我会在后续贴出关于DIY打包的帖子