electron-vue

“ 你也许不了解electron，但你应该了解或使用过atom、vscode、xmin zend，没错他们所使用的开发技术就是electon，通过前端技术开发桌面应用程序，刚开始接触electron时，考虑最多的是性能问题，不过作为一个vscode、xmin zen重度使用者的我来说，基本上对其性能的担心减少了很多，并且发现了基于vue框架构造electron应用程序的样板代码框架，更加方便了前段开发者，集成elementui进行布局以及使用现成的组件，减少了开发者编写css样式和js，提高了开发效率。相对于使用c#，c++开发桌面应用程序，electron具有学习成本低，页面效果好的特点，朋友们，感觉动手吧，开发一个属于自己的桌面应用程序。关注微信公众号【菜鸟阿都】并回复：electron,可获得源码。 ” electron官网： http://www.electronjs.org/ 使用javascript，html，css构建跨平台的桌面应用程序 electron_vue官网链接： https://simulatedgreg.gitbooks.io/electron-vue/content/cn/ 作为一个半吊子前端程序的后端程序员的我来说，那还不赶快试一下，于是动手开发了一个数据库管理软件。 实现的功能： 对数据库连接信息进行缓存 通过点击左侧数据表，右侧会展示表数据

参考： https://blog.csdn.net/mr_orange_klj/article/details/104226409 一个流程下来几乎无报错； 项目结构和vue-cli3搭建出来的一样，写法几乎无差异： 最后打包时和前面的用electron-vue做的一样，winCodeSign和nsis，注意下载对应包放到对应位置，加快打包速度。 来源： oschina 链接： https://my.oschina.net/u/3455362/blog/4693546

Electron-vue请求携带cookie跨域问题 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 问题说明 在请求携带cookie的时候，跨域的问题又重新来了，原因在于cookie标识了服务器，我们在跨域配置的时候Access-Control-Allow-Origin，这个参数我们需要具体的指出，而不能使用* 问题解决 这个跨域问题一般在后端，这里一TP5.1为例 在路由配置跨域的时候精确到具体的客户端服务器的地址，也就是你前端的地址 这样就可以啦 感谢 万能的网络 以及勤劳的自己 来源： oschina 链接： https://my.oschina.net/guizimo/blog/4350009

导航： （一）Electron跑起来 （二）从零搭建Vue全家桶+webpack项目框架 （三）Electron+Vue+Webpack，联合调试整个项目 （四）Electron配置润色 （五）预加载及自动更新 （六）构建、发布整个项目（包括client和web） 摘要： 整个项目就剩最后一哆嗦了，但仅仅是当作demo模版来说，实际项目的话，还有很多需要细化的地方。项目完整代码： https://github.com/luohao8023/electron-vue-template ，随博客更新。 一、打包客户端 首先是要改一下build.js，把上篇文章没做的事儿给做了。 上篇文章已经构建出了可执行文件目录app，这次我们要做的就是使用electron-builder把app目录打包为安装包。 在之前的基础上引入electron-builder，然后对app目录进行打包： const builder = require('electron-builder' ); // 在所有的打包逻辑执行完成之后，确认已经正确生成了app目录 builder.build().then(() => { del([ './pack/*.yaml', './pack/*.blockmap' ]); // 为了方便，打包完成之后我们打开文件管理器 openFileManager(); });

本文主要讲解集成及使用sqlcipher，一个可以加密的sqlite。sqlcipher官方npm地址： https://www.npmjs.com/package/@journeyapps/sqlcipher 由于和sqlite的功能一样，只是增加了加密的功能，所以具体安装方法请参照： https://my.oschina.net/david1025/blog/3182941 1. 安装sqlcipher依赖 npm install "@journeyapps/sqlcipher" 安装完成之后，需要再运行一下（否则会出现找不到sqlite3.node） npm install 2.使用 var sqlite3 = require('@journeyapps/sqlcipher').verbose(); var db = new sqlite3.Database('test.db'); db.serialize(function() { // Required to open a database created with SQLCipher 3.x db.run("PRAGMA cipher_compatibility = 3"); db.run("PRAGMA key = 'mysecret'"); db.run("CREATE TABLE lorem (info TEXT)

electron-vue这个插件没用过，因为里面的electron版本和vue版本固定了感觉不灵活所以没去尝试，使用 Vuecli3.0 和electron5.0.8版本用到了串口，无语的是打包每次都成功了，一运行就报错。报错的意思大概就未引用seriaport模块，一顿无语。。。我不是在配置文件加了么。。。。 只好去他们的官网查看，终于让我找到了问题所在 蛋痛的是，这文件加在哪儿？？？？ 心里是崩溃的，最后没办法怀着试试的心态加到根目录 打包后成功了。。。。 嗯。。。研究这个已经三个星期了，各种坑，对于我这个英语菜的我都不好意思的人，还是很开心的。。。。看来是时候好好学习下英语了， 来源： oschina 链接： https://my.oschina.net/u/4398116/blog/4286115

electron-vue这个插件没用过，因为里面的electron版本和vue版本固定了感觉不灵活所以没去尝试，使用 Vuecli3.0 和electron5.0.8版本用到了串口，无语的是打包每次都成功了，一运行就报错。报错的意思大概就未引用seriaport模块，一顿无语。。。我不是在配置文件加了么。。。。 只好去他们的官网查看，终于让我找到了问题所在 蛋痛的是，这文件加在哪儿？？？？ 心里是崩溃的，最后没办法怀着试试的心态加到根目录 打包后成功了。。。。 嗯。。。研究这个已经三个星期了，各种坑，对于我这个英语菜的我都不好意思的人，还是很开心的。。。。看来是时候好好学习下英语了， 来源： oschina 链接： https://my.oschina.net/u/4335726/blog/4286134

导航： （一）Electron跑起来 （二）从零搭建Vue全家桶+webpack项目框架 （三）Electron+Vue+Webpack，联合调试整个项目 （四）Electron配置润色 （五）预加载及自动更新 （六）构建、发布整个项目（包括client和web） 摘要： 到目前为止，我们的项目已经具备了PC客户端该有的一些基础功能和调试环境，但是总感觉缺了灵魂，那就是结合实际项目、实际业务的细节处理，缺着吧。。。这篇文章就介绍一下预加载和自动更新，文字功底有限，如有介绍的不清楚的地方，欢迎留言指正，或者跳过文字，直接去看代码，项目完整代码： https://github.com/luohao8023/electron-vue-template ，随博客更新。 一、预加载 1、什么是预加载？什么场景能用到？　 preload String (可选) -在页面运行其他脚本之前预先加载指定的脚本 无论页面是否集成Node, 此脚本都可以访问所有Node API 脚本路径为文件的绝对路径。 当 node integration 关闭时, 预加载的脚本将从全局范围重新引入node的全局引用标志。 摘自electron官网的一段介绍， https://www.electronjs.org/docs/api/browser-window 。

Electron-vue运行之后出现了文件浏览器 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 问题介绍 在运行项目的时候出现了文件浏览器 问题原因（官方解释） 你的 src/renderer 包含错误。请检查 控制台 (console)，修复错误，然后用 CommandOrControl+R 刷新 electron。 详述 如果你的 src/renderer 中出现错误，则会在首次运行时与 ESLint 产生冲突。接着，一个无效的 webpack 的 renderer.js 会被生成出来，它会打断 HtmlWebpackPlugin 创建 index.html 。由于 webpack-dev-server 没有 index.html 可以提供服务，所以服务器失败，程序返回到文件浏览器。 问题解决 主要适合ESlint有关，将ESlint检查关闭就可以了，具体的在.electron-vue下面的三个配置文件里面的ESlint代码注释掉 那么这个问题就解决了 感谢 万能的网络 以及勤劳的自己 来源： oschina 链接： https://my.oschina.net/guizimo/blog/4339710

导航： （一）Electron跑起来 （二）从零搭建Vue全家桶+webpack项目框架 （三）Electron+Vue+Webpack，联合调试整个项目 （四）Electron配置润色 （五）预加载及自动更新 （六）构建、发布整个项目（包括client和web） 摘要： 整个项目就剩最后一哆嗦了，但仅仅是当作demo模版来说，实际项目的话，还有很多需要细化的地方。项目完整代码： https://github.com/luohao8023/electron-vue-template ，随博客更新。 一、打包客户端 首先是要改一下build.js，把上篇文章没做的事儿给做了。 上篇文章已经构建出了可执行文件目录app，这次我们要做的就是使用electron-builder把app目录打包为安装包。 在之前的基础上引入electron-builder，然后对app目录进行打包： const builder = require('electron-builder' ); // 在所有的打包逻辑执行完成之后，确认已经正确生成了app目录 builder.build().then(() => { del([ './pack/*.yaml', './pack/*.blockmap' ]); // 为了方便，打包完成之后我们打开文件管理器 openFileManager(); });