Electron + Vue 3 开发 Mac 版日历——漫谈 Notion 事件获取之路

2024-01-29 04:57:55

在闲暇之余，我开始学习 Electron 和 Vue 3，并使用 TypeScript 和 Vite 作为辅助工具，边学边开发一款 Mac 版日历。其中，我面临的一个挑战是如何从 Notion 中获取事件数据。我希望通过这篇文章分享我的经验，帮助您在开发类似项目时更加得心应手。

1. 准备工作

在着手开发之前，我们需要做好充分的准备工作。首先，确保您已安装好 Electron、Vue 3、TypeScript 和 Vite。此外，您还需要注册一个 Notion 账户并创建一个新的数据库，用于存储日历事件。

2. 创建 Electron + Vue 3 项目

接下来，我们可以使用 Electron 和 Vue 3 创建一个新的项目。这里推荐使用 Vite 作为构建工具，因为它可以帮助我们快速启动项目并提供热重载功能。

# 安装 Electron 和 Vue CLI
npm install -g electron vue-cli
# 创建一个新的项目
vue create electron-calendar
# 进入项目目录
cd electron-calendar
# 安装 Notion API SDK
npm install @notionhq/client

3. 集成 Notion API

现在，我们需要将 Notion API SDK 集成到我们的项目中。首先，在项目目录下创建一个新的文件 notion.js，并添加以下代码：

import { Client } from '@notionhq/client'

const notion = new Client({
  auth: process.env.NOTION_API_KEY,
})

export default notion

在上面的代码中，我们创建了一个 Notion 客户端实例，并将其导出供其他模块使用。

4. 获取 Notion 事件

接下来，我们需要编写代码来获取 Notion 事件。首先，在项目目录下创建一个新的文件 calendar.js，并添加以下代码：

import notion from './notion.js'

export async function getEvents() {
  const response = await notion.databases.query({
    database_id: process.env.NOTION_DATABASE_ID,
  })
  return response.results
}

在上面的代码中，我们使用 Notion 客户端实例查询了数据库中的事件数据，并将其导出供其他模块使用。

5. 在 Vue 组件中使用 Notion 事件

现在，我们可以将 Notion 事件数据在 Vue 组件中使用。首先，在 src/components 目录下创建一个新的文件 Calendar.vue，并添加以下代码：

<template>
  <div>
    <ul>
      <li v-for="event in events" :key="event.id">
        {{ event.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { getEvents } from '../services/calendar.js'

export default {
  setup() {
    const events = ref([])

    onMounted(async () => {
      const data = await getEvents()
      events.value = data
    })

    return {
      events,
    }
  },
}
</script>