从零开始搭建vue + electron基础项目
最后更新于
最后更新于
最近打算做一个代码生成工具，公司原本是有代码生成工具的，使用的时C#的winform框架进行开发，用起来还是很不错的，主要时给后端生成java 和 Ext代码的，我自己基于vue-cli封装了一套后端使用的前端框架，很多的代码都是相同的，但是有些代码是需要根据数据库表进行修改的，所以这就比较蛋疼了，修改要花费不少的时间。 之前尝试过使用wxpython 和 WPF这样的GUI框架进行开发，都实验了一下，主要时为了让自己尝试下别的语言，但是想要用新的的语言顺利的开发出来，估计可能会比较的耗时，所以想想能不能用electron+vue这样熟悉的老套路来开发这个工具，但是自己对node了解额不是特别的深入。
网上有很多的electron模板，但是下载下来使用多多少少都会有一些问题，还要去学习以下作者搭建这个框架的思路，而且个人觉得程序员都有炫技的情节，所以很多本可以简单的东西都会写的很复杂。
首先我们初始化一个electron项目，从最原始的开始搭建，相信我官方文档才是原汁原味的，通过官方文档进行electron项目的创建，， 通过该指引你可以完成一个electron项目的创建。
我们可以另外新建一个项目文件夹，最后通过复制粘贴的方式，将vue项目的代码与electron项目的代码合并起来。
加载html，不适用文件路径加载，使用网页地址加载。
我的electron项目时参考示例代码进行创建，在代码里可以看到，是通过wx.loadFile()来加载静态文件的，但是我们是要加载webpack热加载的，所以这里的代码要修改为wx.loadUrl(),当然如果是开发环境的话，那么加载的地址还是地址，但是如果是生产环境，加载的地址则可以是文件地址。
对于高版本的node指定环境变量需要安装cross-env插件