一、框架搭建

使用命令：vue init simulatedgreg/electron-vue，搭建步骤见下图，按照提示输入项目中需要的插件，一键安装

上图说明：

（1）karma 是一个简单的javascript测试工具

（2）mocha 是一个功能丰富的javascript测试框架，运行在nodejs和浏览器中，可以进行异步测试。

（3）单元测试 (使用 Karma + Mocha)*

（4）端到端测试 (使用 Spectron + Mocha)*

框架介绍地址：

二、开发和项目运行问题

1、使用vuex-electron 会报错[Vuex Electron] Please, don't use direct commit's, use dispatch instead of this.直接注释掉。

2、 electron-vue不显示element的el-table问题。

3、插入个小话题，该框架不能使用store action方法 store中不可以import 否则会报程序内部错误，至于为啥，我猜测的是可能我安装的项目通过命令安装的版本不支持，还有待大佬们指点。

4、Electron中Jquery的引入方式：（可以参考下下面博主写的博客）

我的项目中我采用的是方法4：

5、三方插件的引入：

在package.json中加上打包后三方文件的打包位置

注意：下图中三方文件的引入，一定要放在上面配置的路径下，如果修改路径得相应修改配置文件才可以

打包之后得文件路径如下：

6、npm install安装依赖包时提示，安装electron失败 postinstall:"node install.js"

解决方法：将electron下载地址指向taobao镜像

npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/"

以上，框架也搭建好了，运行时遇到的各种问题也解决了，好了（小开心了一下），下面可以开始我们正常的撸代码旅程了，写呀写呀写。。。终于第一版属于前端的静态页面代码旅程结束了，我们可以打包看看效果了。但是问题又来了，打包又出现了问题。。。

报了如下截图错误：

报上图错误的情况下是机器阻止了对应链接的下载，可以将打包需要的依赖包直接下载放入对应的文件夹下，C:\Users\10376\AppData\Local\electron-builder\Cache 这是我的文件夹位置，可以对应找自己的文件位置，下面提供需要下载的依赖包链接：

在对应的的文件夹下创建报错的文件夹名称，例如：上图中报错的我们就需要创建nsis-resources-3.0.0文件夹，都下载放入之后文件夹所需的依赖包如下图：

1、开发环境调用后端接口配置：

（1）开发环境：

（2）生产环境：

（3）这里生产环境的配置https需要加上下面的信任安全配置，也就是忽略证书相关的错误，从而实现信任这个网址

2、打包相关配置：

至此，我第一次使用electron框架中遇到的问题就跟大家分享完了，接下来就是项目中最让人头疼的一个环节，那就是调用硬件的接口，也就是ffi调用动态链接库dll的应用了，这个总共加起来从环境安装配置到正式使用，将近花费了我四周的时间，还好皇天不负有心人，最后成功上线。

ffi调用动态链接库dll这块的内容见下篇博客！！！