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

    体验版安装包下载

    起因    

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

    准备

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

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

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

    开发

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

    

1594715668(1).jpg

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

1594715784.jpg

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

1594715970(1).jpg

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

demo.gif

    打包

    打包阶段是直接使用脚手架的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安装包

1条评论在 “electron + vue-cli 开发简单的工程模板管理工具”

发表评论

电子邮件地址不会被公开。 必填项已用*标注