使用electron+vue开发一个跨平台todolist(便签)桌面应用

使用electron+vue开发一个跨平台todolist(便签)桌面应用

# 1

最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服。之前我一直简单的以为electron只是张网页加个壳,和那些号称跨平台的运行在手机上的webapp是一个套路。直到我真的需要开发一个跨平台桌面应用的时候,我又认真的尝试了一下electron,我开始意识到:这才是我理想中的跨平台桌面应用开发的最终形态,它简直太优秀了。

# 2

在使用electron期间,我顺便写了一个简单的todolist(便签)应用,用于学习和尝试;项目地址:https://github.com/xiajingren/xhznl-todo-list 界面参考了小黄条便签。它目前的功能还非常简单,但是包含了很多我使用electron时遇到问题,这也是electron新手都很可能遇到的,也算是一个技术总结吧;比如:

  • electron无边框透明窗口/拖拽/置顶/闪烁问题

  • electron软件开机自启动

  • electron软件单实例运行

  • electron窗口的鼠标穿透/部分穿透

  • electron软件打包

  • electron软件自动更新(GitHub)

  • electron中使用本地数据库

  • electron中数据导出为excel文件

  • 等等……

以下是项目README:

# 3

xhznl-todo-list

✨一个使用 electron + vue + electron-builder 开发的跨平台 todo-list 桌面应用

相关技术

electron 9.x

vue 2.x

vue-cli-plugin-electron-builder

electron-builder

lowdb

exceljs

dayjs

Vue.Draggable

……

功能预览

todo list

done list

基本操作

数据导出

鼠标穿透

macOS

步骤

npm install
npm run electron:serve

npm run electron:build

下载 releases:https://github.com/xiajingren/xhznl-todo-list/releases

规划

  • [x] todo/done 基本功能
  • [x] 本地数据库存储
  • [x] 软件自动更新
  • [x] 数据导出为 excel
  • [x] 开机启动
  • [x] 鼠标穿透
  • [ ] 窗口贴边自动收起
  • [ ] ……

# 4

在使用electron期间确实也遇到很多坑,其中大部分都是来自于electron编译nodejs模块。后续我可能整理一个关于electron的系列分享,介绍 xhznl-todo-list 的实现细节,欢迎关注。

GitHub:https://github.com/xiajingren/xhznl-todo-list

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/2633.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 安卓手机如何查看分辨率_读取屏幕内容的安卓软件

    安卓手机如何查看分辨率_读取屏幕内容的安卓软件本文主要解决获取手机屏幕的大小:例子很简单,主要通过DisplayMetrics类来获取相关的信息,代码如下效果图:XML文件1.activity_main.xmlxmlns:tools=”http://schemas.android.com/tools”android:layout_width=”match_parent”android:layout_height=”match_pa…

    2022年8月13日
    0
  • HDU 4334 Trouble

    HDU 4334 Trouble

    2021年12月3日
    41
  • 使用 Groovy 模板进行 MVC 编程

    使用 Groovy 模板进行 MVC 编程 视图是MVC编程的一个重要部分,而MVC编程本身又是企业应用程序开发的一个重要组件。在这篇实战Groovy的文章中,AndrewGlover向您介绍了Groovy的模板引擎框架是如何用来简化视图编程的,并如何使您的代码更加经久容易维护。 在最近的实战Groovy系列中,我们已经介绍过Groovy是构建报表统计程序的一个非常好的工具。我们使用了一个校验

    2022年6月5日
    52
  • vue pc端打印二维码[通俗易懂]

    vue pc端打印二维码[通俗易懂]importVuefrom”vue”;leta=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAKoCAYAAACvNywJAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF7svQmcZVdV73+6q7tr6Bq6q+fupDN15lETZEgkiIkSME4BgYeAQp78ow/Rv/8HweERnnwk8p5/RP+apwQUkI9IiCI8jRoQ0BDgETAkIWNn6KTn6qGqurrmqv6v7.

    2022年6月5日
    40
  • git强制删除本地分支_Git分支

    git强制删除本地分支_Git分支删除分支命令删除一条分支:gitbranch-DbranchName删除当前分支外的所有分支:gitbranch|xargsgitbranch-d删除分支名包含指定字符的分支:gitbranch|grep‘dev*’|xargsgitbranch-d命令解释|道命令,用于将一串命令串联起来。前面命令的输出可以作为后面命令的输入。gitbranch用于列出本地所有分支。xargsxargs是给命令传递参数.

    2022年10月16日
    0
  • 百度网盘加速(加速百度网盘下载速度)

    分享:链接:https://pan.baidu.com/s/1HReiz__CyKWM6cdzApiVmQ提取码:ffjm复制这段内容后打开百度网盘手机App,操作更方便哦本软件使用需要的其他软件:Chrome及switchyomega插件(插件随链接发送,也可去官网下载)一安装proxyeedownWindows:下载Windows版本的压缩包以…

    2022年4月14日
    91

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号