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

本文 839字，需要 2.10 分钟

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

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

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

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

寻找方向

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

timestamp

通过寻找一通，timestamp 这个比较适合我入门，而且也提供了 brew 安装：

brew install timestamp

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

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

第三个满足我的是：提供源代码[2]，可以让我最快的入手。

vite-electron-builder

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

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

1.基于 Electron + Vue；

2.Vue 至少是 3，而不是 2 了；

3.使用 TypeScript；

4.使用 Vite，至少逼格比 Webpack 要高一丢丢；

通过 Github 搜索，能满足以上条件的，好像只有这个了： vite-electron-builder[3]

至少自己是这么介绍的：

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[4]。

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

小结

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

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

未完待续！

参考

[1] fantastical 3 https://flexibits.com/fantastical

[2] 源代码 https://github.com/mzdr/timestamp

[3] vite-electron-builder https://github.com/cawa-93/vite-electron-builder

[4] FullCalendar https://fullcalendar.io/