市面上的前端脚手架几乎都是命令行式问答方式交互操作，然后拉取模板，这种方式不仅体验极差展示有限，而且当选项很多的时候很容易出错。因为大家使用pc进行工作，如果有一个可视化的程序来构建项目，那么体验和扩展能力就大大增强了，所以我就产生了一个开发能在桌面运行脚手架程序的念头。顺便学习一下使用Electron开发跨平台桌面客户端和Vue3的新特性。

整体开发思路

1.使用vue3开发UI界面，以及实现交互操作

2.打包成Electron客户端（windows端）

3.打包成exe安装包（看需要进行加壳处理）

开发步骤

项目搭建

网上有个比较火的脚手架electron-vue，但electron-vue是vue-cli2.0的版本，现在都已经出 4.0 了，再者electron-vue已经很久没有更新，我们可以使用 vue 最新的脚手架插件vue-cli-plugin-electron-builder来搭建项目。

用vue-cli创建一个vue3项目

略

在项目内集成Electron

进入我们项目的根目录，我们执行以下命令来安装插件vue-cli-plugin-electron-builder

vue add vue-cli-plugin-electron-builder

选择最新11.0.0版本

依赖包有些大，需要等待一段时间

项目实现

思路：

主进程监听渲染进程发送的事件和参数：

主进程 ipcMain.on(“send”, (event, arg) => { console.log(arg); });

渲染进程 ipcRenderer.send(“send”,’来自渲染进程’);

根据不同的事件和参数，拉取对应远程模板，并使用ejs预处理，调整好目录，删除多余文件，完成初始化。

未完待续。。。

项目打包

electron-builder打包

electron-builder有比electron-packager有更丰富的的功能，支持更多的平台，同时也支持了自动更新。除了这几点之外，由electron-builder打出的包更为轻量，并且可以打包出不暴露源码的setup安装程序。

默认已经集成打包方式，但是依赖包下载失败率很高😒，后面再展开研究

 

electron-packager打包

npm install electron-packager --save-dev

package.json添加script

"build:exe":"electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=public/favicon.ico --out=./exe --asar --app-version=0.0.1 --overwrite --ignore=node_modules",

运行 npm run build 打包vue项目生成dist项目文件

运行 npm run build:exe 生成exe文件夹和HelloWorld-win32-x64

拷贝dist整个文件夹到HelloWorld-win32-x64目录下的resources目录中，并修改文件夹名称为app

此时运行HelloWorld.exe，第一个桌面端应用程序就完成了。

但是这种方式我们还需要手动打包成exe安装文件

NSIS打包electron程序为exe安装包

打开NISI：

1）选择可视化脚本编辑器（HW VNISEdit）

2）选择新建脚本：向导

3）设置应用名称，版本号，网址，标志随便自定义一个就好，然后下一步

4）设置安装程序图标(图标必须是ico格式)，名称，语言（SimpChinese），界面，然后下一步

5）授权文件有就填，没有就填空白   然后下一步

6）默认两个文件选中，删除 , 添加应用程序文件

7）添加我们之前打包生成的exe文件, 选择HelloWorld-win32-x64文件夹，选中包含子目录，确定，然后下一步

8）可修改开始菜单名称，然后下一步

9）可设置安装成功后启动的程序，默认就是我们打包后的启动程序，下一步

10）设置一些卸载时界面的提示信息，然后下一步

11）保存我们的脚本，完成，保存到桌面

12）打开脚本文件，开始编译，需要一段时间

13）编译运行完成之后我们就得到了一个exe安装包

我们打包的exe安装包，在安装的时候有可能会被某些“安全”软件当做病毒处理，这时候需要把安装包进行加壳处理，涉及到另外一个领域，我们有空在研究。

不过话说回来，我们打包脚手架程序是给内部使用，如果遇到这种问题可以通过添加信任等方式处理。