从零开始搭建vue + electron基础项目

最近打算做一个代码生成工具,公司原本是有代码生成工具的,使用的时C#的winform框架进行开发,用起来还是很不错的,主要时给后端生成java 和 Ext代码的,我自己基于vue-cli封装了一套后端使用的前端框架,很多的代码都是相同的,但是有些代码是需要根据数据库表进行修改的,所以这就比较蛋疼了,修改要花费不少的时间。 之前尝试过使用wxpython 和 WPF这样的GUI框架进行开发,都实验了一下,主要时为了让自己尝试下别的语言,但是想要用新的的语言顺利的开发出来,估计可能会比较的耗时,所以想想能不能用electron+vue这样熟悉的老套路来开发这个工具,但是自己对node了解额不是特别的深入。

为什么喜欢从零开始

网上有很多的electron模板,但是下载下来使用多多少少都会有一些问题,还要去学习以下作者搭建这个框架的思路,而且个人觉得程序员都有炫技的情节,所以很多本可以简单的东西都会写的很复杂。

先初始化一个electron项目

创建一个vue-cli项目

我们可以另外新建一个项目文件夹,最后通过复制粘贴的方式,将vue项目的代码与electron项目的代码合并起来。

俩个问题注意下

  • 加载html,不适用文件路径加载,使用网页地址加载。

我的electron项目时参考示例代码进行创建,在代码里可以看到,是通过wx.loadFile()来加载静态文件的,但是我们是要加载webpack热加载的,所以这里的代码要修改为wx.loadUrl(),当然如果是开发环境的话,那么加载的地址还是地址,但是如果是生产环境,加载的地址则可以是文件地址。

  • 对于高版本的node指定环境变量需要安装cross-env插件

最后更新于