使用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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • sublime text3 激活码(JetBrains全家桶)

    (sublime text3 激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月27日
    99
  • Portraiture 3.5.6磨皮滤镜插件适用于Photoshop磨皮美化功能[通俗易懂]

    Portraiture 3.5.6磨皮滤镜插件适用于Photoshop磨皮美化功能[通俗易懂]软件名称:Portraiture3Plug-in版本号:v3.5.6(build版3565-03)软件大小:8.48MB软件语言:简体中文授权形式:一码一机更新日期:2021年8月23日软件类型:简体中文软件类别:国内软件-插件软件-磨皮插件软件插件捆绑:无支持系统:MacOS10.13-11.4简介:Portraiture是一款智能磨皮的滤镜插件,该插件能够给Photoshop和Lightroom添加智能磨皮美化功能,可以帮助用户快速对图片中的人物的皮肤、头发

    2022年7月22日
    15
  • Centos 7安装nginx并配置https[通俗易懂]

    Centos 7安装nginx并配置https[通俗易懂]1.更新yum源yumupdate2.安装nginx的依赖环境yuminstall-ygcc-c++pcrepcre-develzlibzlib-developensslopenssl-develgcc-c++:安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境。pcrepcre-devel:PCRE(PerlCompatible…

    2022年5月26日
    43
  • 最大矩形面积leetcode_leetcode免费吗

    最大矩形面积leetcode_leetcode免费吗原题链接给定 n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为 1 。求在该柱状图中,能够勾勒出来的矩形的最大面积。以上是柱状图的示例,其中每个柱子的宽度为 1,给定的高度为 [2,1,5,6,2,3]。图中阴影部分为所能勾勒出的最大矩形面积,其面积为 10 个单位。示例:输入: [2,1,5,6,2,3]输出: 10题解对于每一个长方体,找出左边比他小的第一个长方体和右边比他小的第一个长方体,然后遍历求结即可class Solution {public

    2022年8月8日
    11
  • C#MQTTNET服务端使用说明

    C#MQTTNET服务端使用说明C#MQTTNET服务端使用说明1.安装MQTTNet两种方式Shell可视化安装2.当前我的项目安装的依赖如下3.如何使用1.我想启动MQTT服务器,我该怎么做?2.我想知道MQTT服务器是否启动成功,我该怎么做?3.我想知道MQTT服务器是否停止允许,我该怎么做?4.我想知道有那些设备连接上了服务器,我该怎么做?5.我想知道有那些设备断开连接,我该怎么做?6.我想监听消息,我该怎么做?7.我想连接的客户端校验身份信息后才允许收发消息,我该怎么做?8.我想知道客户端订阅主题与取消订阅主题,我该怎么做?1.

    2022年6月25日
    315
  • 服务器硬件基础知识

    服务器硬件基础知识服务器的概述计算机的硬件主要有主机和输入/输出设备。主机包括机箱,电源,主板,CPU(中央处理器),内存,显卡,声卡,网卡,硬盘,光驱等。输入/输出包括显示器,键盘,鼠标,音箱,摄像头,打印机和扫描仪等。服务器服务器是指在网络环境下运行相应的应用软件,为网上用户提供共享信息资源和各种服务的一直高性能计算机。服务器的选择:处理器性能,I/O性能,管理性,可靠性,扩展性。同样…

    2022年7月22日
    11

发表回复

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

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