electron + vue-cli 开发简单的工程模板管理工具

    体验版安装包下载

    起因    

    距离来到新公司已经两个月有余，越发觉得前端的相关模板多且杂乱，由于各种业务的需求以及人员流动大，每个人封装的模板也不同。当然，第一要务自然是统一大家手里的前端模板，比如H5版本的统一用一份不管是新的还是旧的，pc端也统一使用一份，但是由于业务需求和人员分布问题，有时候还是不得不妥协的使用其他模板文件开发，此时开发前找到相关的模板 ，不管是本地文件还是git远程项目我都觉得是一件挺繁琐的事情，于是萌生了一个开发项目模板管理器的想法。

    准备

    按照想法，应该是一个GUI界面，可以在当前目录或者文件夹的右键菜单直接打开界面，然选择需要的工程模板直接导入至文件夹，同时支持一些数据的维护，例如模板文件的增删改查等简单的功能。（当然最好能支持直接从git上直接拉取代码，此功能有时间将在后期实现。）

    基于上述想法我的第一反应当然是使用nwjs或者electron来开发一款桌面级的app应用来实现，有nodejs的支持，其实只需要维护本地的一个json文件以及相关的文件目标文件目录即可。例如上传模板实际上是复制文件夹中的文件到模板管理文件夹中，同时更新json文件，给模板添加名称以及描述等信息。因为之前已经做过了nwjs的应用，因此这次想尝试使用electron来开发。

    前期准备工作，因为我的技术栈是vue因此选择electron-vue脚手架来开发这个应用，ui框架用的是element-ui。在脑子里简单的把界面构建出来以后就可以开始了。

    开发

    首先是软件的主界面，希望能简洁的只显示当前管理的各模板工程，以及软件的基本功能，效果图如下：

    在点击工程模板的时候弹出弹窗，然后在当前的目录里导入模板文件，以及模板的相关管理功能。

    之后是模板的上传维护，以及修改，此处我沿用上述的想法，使用一个json文件来维护渲染的列表，在上传模板或者修改模板的同时，修改json文件来维护列表数据，如图：

    如图所示，除了模板名称，描述，目录以外，新增了一个ignore的规则，即符合ignore规则的文件将被忽略，不被上传到模板维护目录，例如git工程里的.git文件以及node_modules文件按照图片设置将不被上传。也可以自己编写规则，用逗号隔开，如果文件路径里含有该关键字，该文件将被忽略（注意：此处规则使用字符串 indexOf 方法匹配，因此如.gitignore文件由于文件名含有.git 将被忽略，此处bug将在后期修复，或将支持正则方式）。

    打包

    打包阶段是直接使用脚手架的electron-builder打包的，相关配置也是已经写好，因此我只需要执行build命令，有一个难点就是我希望能够将安装后的app在鼠标右键菜单里显示，并且直接获取到当前文件夹的路径。查了一些相关的资料，windows系统下是需要去修改注册表来实现的，由于我之前习惯使用的打包软件是Inno Setup Compiler 因此查看了官方文档，添加了修改注册表的相应配置如下：

[Registry]
Root: HKCR; Subkey: "Directory\Background\shell\PT_manage\command"; ValueType: string; ValueName: ""; ValueData: "{app}\PT-manager.exe %V"
Root: HKCR; Subkey: "Directory\Background\shell\PT_manage"; ValueType: string; ValueName: "Icon"; ValueData: "{app}\PT-manager.exe"
Root: HKCR; Subkey: "Directory\Background\shell\PT_manage"; ValueType: string; ValueName: ""; ValueData: "在当前目录打开PT-manager"
Root: HKCR; Subkey: "Directory\shell\PT_manage\command"; ValueType: string; ValueName: ""; ValueData: "{app}\PT-manager.exe %1"
Root: HKCR; Subkey: "Directory\shell\PT_manage"; ValueType: string; ValueName: "Icon"; ValueData: "{app}\PT-manager.exe"
Root: HKCR; Subkey: "Directory\shell\PT_manage"; ValueType: string; ValueName: ""; ValueData: "在当前目录打开PT-manager"

    此时安装后可以在鼠标右键打开app，但是除了打开app以外，还需要获取当前文件夹的目录，由于注册表支持参数如 %1 和 %V 都是当前的目录，此时会将文件目录传给nodejs，通过nodejs的 process.argv就可以获取到相关路径，但是我在electron里获取到的process.argv确实一堆乱七八糟的配置类字段，查了一下相关资料，electron确实可以获取到注册表传递的path路径，但是只有在主进程里能获取，渲染进程里无法获取到process.argv内容， 只能获取到默认配置，因此次数的路径参数还需要通过主进程传递给渲染进程，简单代码如下：

// 主进程
ipcMain.on('getPath', function (event) {
  let p = process.argv[1]
    event.sender.send('setPath', p)
})

// 渲染进程
ipcRenderer.on('setPath',(e,path) => {
    this.dir = path
});

    此时，总算完成了app的开发，实际使用情况确实解决了方便我需要管理不同模板的问题。后期需要解决的问题：

1. 关于ignore规则的优化，如：支持正则，或者更精确的匹配

2. 能够直接导入git项目，并且过滤.git文件夹内容

3. 尽量压缩安装包体积

    结尾

    虽然可能很多人觉得这个app会比较鸡肋或者说只是一个玩具工程，但是它确实解决了我的一些问题，同时也熟悉的electron功能，以及了解了windows注册表的一些基本作用，总之还是有所收获。

    跟上安装包链接 点击此处下exe安装包