阅读 888

Electron+Vue3 MAC 版日历开发记录(1)

这是我参与更文挑战的第1天,活动详情查看: 更文挑战

本来一直都有一个想法,自己在工作之余,写一个基于 Electron 开发的 Mac 工具,之前有想过写 Markdown 工具、但一直习惯了使用 MWeb,想了想还是选择其他的。

有一天发现我fantastical 3 开始走「订阅」了,而我又有农历依赖症。所以我就萌生出自己开发一个 「Mac 日历」。

先放出我个人基于 Electron 做出的效果 (到目前为止):

下面开始第一天的构思和想法。

寻找方向

首先,我已经好长时间没折腾代码了,又对新技术充满了好奇。第一步,寻找对标的开源代码:

timestamp

通过寻找一通,timestamp 这个比较适合我入门,而且也提供得 brew 安装:

brew install timestamp
复制代码

第一个满足我的想法是:能在任务栏实时显示当前时间 (包括秒针)。

第二个满足我的是:没有复杂的页面,只有在点击状态栏时,才显示日历,简简单单。

第三个满足我的是:提供源代码,可以让我最快的入手。

vite-electron-builder

有了 timestamp 为基础,接下来就是找基于 Electron 脚手架的工作了。

但也不是毫不目标的找,至少需要满足以下条件:

  1. 基于 Electron + Vue;
  2. Vue 至少是 3,而不是 2 了;
  3. 使用 TypeScript;
  4. 使用 Vite,至少逼格比 Webpack 要高一丢丢;

通过 Github 搜索,能满足以上条件的,好像只有这个了: vite-electron-builder

至少自己是这么介绍的:

Vite+Electron = 🔥

This is a secure template for electron applications. Written following the latest safety requirements, recommendations and best practices.

Under the hood is used Vite — super fast, nextgen bundler, and electron-builder for compilation.

FullCalendar

紧接着,那就是「日历」本身了。日历从结构和布局上来说,都是比较复杂的,而且我看了一圈很多关于 Vue 的组件框架,基本都提供了 Calendar 组件,但本身的功能不多,未来的扩展性似乎不足。

基于此,我又开始了全网搜索了,最后还是找到了几乎都会参考和使用的 FullCalendar

但,美中不足的是,有关更深入的插件需要花钱,而提供扩展的接口也不是很多,官网提供了相当多的文档支持,通过阅读,发现当下可以满足开发的需要。

小结

有了 timestamp 作为参考,也有了 vite-electron-builder 脚手架,再以 FullCalendar 为主要核心构建自己的日历,基本可以开始我的折腾和自学之旅。

接下来的 30 天,看自己能坚持几天,把这过程的东西整理成文字记录下来,这过程也将继续不断完善和丰富代码功能。

未完待续!

文章分类
前端
文章标签