构建 Mac 版日历之旅：从零开始深入 Electron + Vue 3

在工作之余，开发一款美观又实用的日历工具，是一件令人兴奋的事情。它不仅可以帮助我管理时间，也让我在技术上有所提升。在这段旅程中，我将详细记录开发过程中的点点滴滴，希望对想要构建类似应用程序的朋友有所帮助。

选择技术栈：Electron + Vue 3 + TypeScript + Vite

在选择技术栈时，我综合考虑了以下因素：

• 跨平台支持：我想要一个可以在 Mac、Windows 和 Linux 上运行的应用程序。
• 前端框架：Vue 3 因其强大的响应式系统、丰富的组件库和易用性脱颖而出。
• 构建工具：Vite 以其快速构建速度和对现代 JavaScript 特性的支持而闻名。
• 类型系统：TypeScript 可以帮助我避免许多常见的 JavaScript 错误，并提高代码的可读性。

最终，我选择了 Electron 作为桌面应用程序的框架，Vue 3 作为前端框架，TypeScript 作为类型系统，以及 Vite 作为构建工具。

开发工具的配置

在开发之前，你需要安装一些必要的工具。

• Node.js 和 npm
• Electron
• Vue 3
• TypeScript
• Vite
• 编辑器（我使用的是 Visual Studio Code）

关于这些工具的安装和配置，网上有很多详细的教程，这里就不再赘述了。

创建项目

接下来，我们需要创建一个新的项目。你可以使用以下命令：

npx create-vue-app my-calendar

这将创建一个新的 Vue 3 项目。接下来，我们需要安装 Electron 和其他依赖项：

cd my-calendar
npm install --save-dev electron
npm install --save @electron/remote @electron/context-menu

编写代码

项目的结构如下：

my-calendar
├── package.json
├── src
│  ├── main.js
│  ├── renderer.js
│  └── App.vue
└── index.html

package.json 文件中包含了项目的依赖项和一些配置信息。

main.js 文件是 Electron 的主进程脚本，它负责创建窗口并加载渲染器进程。

renderer.js 文件是 Electron 的渲染器进程脚本，它负责渲染用户界面。

App.vue 文件是 Vue 3 的根组件，它定义了应用程序的整体结构和外观。

index.html 文件是 Electron 的入口文件，它加载了渲染器进程脚本。

打包项目

当开发完成后，我们需要将项目打包成一个可执行文件。我们可以使用以下命令：

npm run build

这将生成一个 dist 文件夹，其中包含了可执行文件和一些其他资源。

发布项目

最后，我们可以将项目发布到我们的服务器上，以便其他人可以下载和使用它。我们可以使用以下命令：

npm run release

这将生成一个 .zip 文件，我们可以将其上传到我们的服务器上。

总结

以上就是我开发 Mac 版日历📅️应用程序的心得体会。希望对大家有所帮助。如果你有任何问题或建议，欢迎在评论区留言。