使用electron开发了一个excel对比工具
elecrton 是什么?
[摘自官网]
Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。
简而言之:使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
electron中文官网地址
elecrton 有什么特点,前端选择electron开发桌面应用有什么优势?
- web 技术
Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。所以对于前端工程师来说有着近水楼台的先天优势。
- 开源,跨平台
如果您想在linux、mac、window下开发统一UI及功能的桌面应用,使用electron可以方便快捷的build成不同平台的安装包。
- nodeJs的完美融合
引用npm官网的一句话“Build amazing things”,在项目中可以使用前端的任何框架和npm里面所有的模块,比如:ffi模块调取dll文件使你的应用原生功能更加强大,扩展性更好。
electron与nw.jsd该怎么选择?
项目不需要兼容WinXP ? 果断选择electron : nw.js
*
使用electron-vue 快速搭建项目
[摘自官网]electron-vue 充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等。
项目从开发到打包安装文件
1.1 项目使用electron-vue快速搭建,开发中使用yarn管理依赖[如果游vpn的话随意]
1.2 项目UI使用vue的UI库,element、iview根据喜好
1.3 使用node-xlsx读取和生成excel文件
2.1 项目目的:对比两个excel文件中某一列相同项,并且支持追加导出功能。
2.2 开发遇到的问题:node-xlsx读取excel为二维数组,使用element table组件需要数组对象的json格式,所以代码里很多for循环,为了优化大文件的效率,建议巧妙使用if判断和for循环优化写法。
2.3 打包遇到的问题:本机开发打包白屏,但是run dev正常。请参考webpack.renderer.config.js第110行 。 第二种:本机打包正常,copy给其他电脑白屏,报各种模块不存在,请使用【npm】打包!!!一切问题迎刃而解。怀疑是yarn安装依赖没有被打包。
3.1 使用NSIS打包electron生成的可执行文件,需要注意的是在 5/8 的时候先移出全部在依次点击第一个添加exe文件,再点击第二个选择打包后exe所在的目录{记得勾选包含子目录},然后编译,就会生成一个exe安装文件。