使用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)
上一篇 2020年11月19日 下午10:42
下一篇 2020年11月20日 上午9:32


相关推荐

  • ipv4地址分类_d类ipv4地址以什么开始

    ipv4地址分类_d类ipv4地址以什么开始ipv4地址:表示一个网络节点的网络地址总共可以产生40多亿ip地址,32位二进制数–表示用点分十进制IPv4地址由四段组成,每个字段是一个字节,8位,最大值是255,,IPv4地址由两部分组成,即网络地址和主机地址。网络地址表示其属于互联网的哪一个网络,主机地址表示其属于该网络中的哪一台主机,两者是主从关系。IPv4地址的四大类型标识的是网络中的某台主机。IPv4地址长度为32位,共4…

    2025年8月21日
    5
  • decimal,double和float的区别总结

    decimal,double和float的区别总结1 精度和位数的区别 float 单精度浮点 32bit double 双精度浮点 64bit decimal 是高精度 128bit 浮点型 floatdouble 是基本类型 primitivetyp decimal 不是 float 有效数字 7 位 范围 1 5 10E 45to 3 4 10E38double 有效数字 15 16 位 范围 5 0 10E

    2026年3月18日
    2
  • OPC协议_opc协议端口号

    OPC协议_opc协议端口号当然,OPCUA组件也可以在Unix操作系统的信息技术(IT)系统中使用,诸如:Solaris、HPUX、AIX、Linux等,可以是企业资源计划(ERP)系统,可以是生产计划(MES)和监控软件(SCADA),还可以是电子商务应用。OPCUA接口协议包含了之前的A&E,DA,OPCXMLDAorHDA,只使用一个地址空间就能访问之前所有的对象,而且不受WINDOWS平台限制,因为它是从传输层Scoket以上来定义的,这点后面会提到,导致了灵活性和安全性比之前的OPC都提升了。……

    2025年5月26日
    7
  • java gridbagconstraints_GridBagConstraints

    java gridbagconstraints_GridBagConstraintsGridBagConstraintsjavaGui|2014-05-1412:54:00|阅读1737次|评论(1)importjavax.swing.*;importjava.awt.*;publicclassdemo_7{publicstaticvoidmain(String[]args){demo_7_1test=newdemo_7_1();}}clas…

    2025年10月17日
    5
  • Ubuntu安装超好用的Edge浏览器

    Ubuntu安装超好用的Edge浏览器Edge与Chrome都基于开源浏览器Chromium。但是Chrome由与众所周知的原因,扩展商店,翻译等服务延迟高,并不好用。相比较Edge体验起来会更流畅。但是通过官方地址https://www.microsoft.com/zh-cn/edge并没有Linux版本。这里可以通过https://www.microsoftedgeinsider.com/zh-cn/下载官方内部版本。…

    2022年7月21日
    33
  • 数组和集合的区别

    数组和集合的区别数组和集合的定义一 数组数组是 java 语言内置的数据类型 他是一个线性的序列 所有可以快速访问其他的元素 数组和其他语言不同 当你创建了一个数组时 他的容量是不变的 而且在生命周期也是不能改变的 还有 JAVA 数组会做边界检查 如果发现有越界现象 会报 RuntimeExcep 异常错误 当然检查边界会以效率为代价 二 集合 JAVA 还提供其他集合 list map set 他们处理对象的时候就好

    2026年3月19日
    2

发表回复

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

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