Electron+Vue3 MAC 版日历开发记录(15)——使用 Naive UI重构开始

这是我参与更文挑战的第15天，活动详情查看： 更文挑战

由于昨天打了一个包并且可以正常安装和使用，这让我自己有了信心继续往下写。但同时也让给我看到了界面的「丑陋」和对自己 CSS 技术的无奈，所以接下来我将基于已有的功能，开始我的代码重构之旅，尽可能在未来的 15 天内重构成功，真正意义上输出一版，并上线 Mac APP Store 或者 发布到 Brew，让大家使用。

好了，在开始重构之前，说一说我的想法来源。

FullCalendar 出了 Vue 3 Demo

因为刚开始使用 FullCalendar 时，还没有提供 Vue 3 的版本 Demo，所以选择了 Primevue 前端框架；随着 FullCalendar Vue 3 的出来。

从我个人角度不太喜欢继续使用 Primevue 了，首先它来自国外，对国内的展示不太好看，最主要因为它提供的一些能力需要付费，国内基于 Vue 3 的前端框架还是不少，值得使用的。

这也是为什么在这前 15 天里我没有开始着手 CSS 的原因。

所以今天我们将开始重新选择基于 Vue 3 的前端组件。

从崇拜 antfu 开始说起

这几天我无意间看到 Anthony Fu 提交了不少开源的项目，已然成为他的忠实粉丝了。

其中有三个项目是我想借鉴的：

1. github.com/vueuse/vueu…，作为 Vue 3 开发作者之一，写的一些通用的代码集，没理由不用。

2. Naive UI，是一个 Vue3 的组件库。有超过 70 个组件，希望能帮你少写点代码。它比较完整，主题可调，用 TypeScript 写的，不算太慢。对于我来说完全够用了，而且我自己又是一个不会写 css 的人，只要引用它的组件即可，同时，如果哪天觉得它的组件不够用，我们完全可以基于它去构建新的组件来满足自己的使用。

3. Slidev，为开发者打造的演示文稿工具。

其中他用的技术栈很符合目前我所需要的：

它终将成为我代码的参照物，我好好学习它的结构和开发思维。

所以本项目在接下来的重构，以 Naive UI 为主，如果真的需要 CSS，那我也或者使用 Windi CSS

第一个重构点

先把 5.6.0 版本换成 5.7.2：

"@fullcalendar/core": "^5.7.2",
"@fullcalendar/daygrid": "^5.7.2",
"@fullcalendar/interaction": "^5.7.2",
"@fullcalendar/timegrid": "^5.7.2",
"@fullcalendar/vue3": "^5.7.2",

同时，我们也需要更新 Vite 插件：

好了，代码中我们修改引入了：

import FullCalendar, { CalendarOptions, EventApi, DateSelectArg, EventClickArg } from '@fullcalendar/vue3'

保持其他不变，我看看运行看看效果：

日历可以显示，但是当我们点「显示农历」时，提示报错了，跟踪代码发现属性不对：

好了，配置基本没问题了，明天结合请求报错的问题，把 Events 也调整过来。

小结

今天算是前半个月的一个收尾，和下半个月的开始，从 0-0.5，再由 0.5 提升到 1 的过程，欢迎持续关注，未完待续！

代码已同步到 github 上了：github.com/fanly/fanly…