Notion 是最近一段时间比较火的笔记软件，使用了数据库的方式管理笔记，笔记之间可以建立链接，与 RDBMS，关系型数据库的设计非常类似。Notion 的笔记集合相当于数据库中的表，每个笔记就是表中的一行，笔记的属性则为列，这种方式作为数据库来存储数据再适合不过了，而最近 Notion 又上线了 Beta 版的 API，可以让外部应用来操作笔记了，那么这一期我们就利用 Notion API 和 Express.js，为我们的留言板应用添加上后端接口。
从这一期视频开始，你将会通过一系列的视频，学会用 Vue 3.0、Vite 2.0 和 Tailwind CSS 来做一个留言板系统，并利用 Notion API，把它作为数据库来保存数据，使用 Express 构建后端接口。最后实现发布留言、回复留言的功能。
Vue 和 React 的出现，让前端开发的效率有了质的飞跃，我们不用再手动用 JavaScript 去操作 DOM 了，而是借助这些框架帮助我们管理状态和管理 DOM 结构。这期视频我们就把上期使用纯 HTML 编写的页面，改装为 Vue 3.0 的项目，借此也演示一下如何把一个 Vite 2.0 的 html 项目，扩展为 Vue 3.0 的项目。
这几天研究了一下 Vite 2.0，之前在 Vue3 的官方文档有看到过如何使用 Vite 新建一个 Vue 项目，但是没有去了解它，就在最近我收到了关于 Vite 2.0 的新闻推送，看到它支持很多框架，像是 React、Vue、Sevlte，于是就来了兴趣，试了试它的开发体验。整体还是很不错的。首先看一下 Vite 是个什么东西。
Vue 的 composition api 虽然简化了 vue 组件的代码，但是在实际使用过程中仍然需要注意一些问题。这里我把我在体验 vue 3 composition api 的过程中遇到的比较重要的问题整理了一下，尤其是对于有 React 开发经验的人来学习 Vue，会更有帮助。
Vue 是一个渐进式的UI框架。它改变了传统的网页开发中需要使用JS手动操作DOM的开发方式。而是以组件化的形式管理页面元素的代码。这样，每个组件就形成了特殊的、类似于自定义的HTML元素。我们可以给它们添加独特的功能和样式，并管理数据。
Vue setup script 进一步简化了 vue composition api 的代码，不用每次都导出一个只含有
上期视频我们实现了票房的柱状图展示，那么这期视频我们来看一个环形图的配置。先看一下最终效果，环形图的各个部分表示的是某个电影的票房占比，占比越高的颜色越浅，占比越低的颜色越深，每部分还会有指示线，配有文本指明这块区域是哪部电影，占比是多少。鼠标移到某区域的时候，会显示提示框，上面有电影名和具体的数值。在大体了解做成什么样之后，我们来看一下组件的主要代码。
数据可视化已经成为前端发展的一个重要的方向了，利用大数据可以预测趋势、行为。那么数据在进行计算出来之后，最重要 的一步就是进行展示，不展示出来，再好的数据也没说服力。这个视频就看一下，如何利用咱们上期封装好的 Vue Echarts 组件，来展示一下电影票房柱状图的实现过程。先看一效果。
上期视频我们添加了 Express.js 结合 Notion API 的后端服务，这一期我们看一下如和把 Vue 3.0 的前端应用和后端的 Express.js API 连接起来。
上期视频我们把前端连接到了后端，展示了真实的留言和回复列表，但是遗留了几个问题，比如说项目编译的过程比较慢，另外 Notion API 在新增之后，查询列表有一定的延迟，返回速度比较慢。那么这期视频我们来看一下，如何给咱们的项目来优化一下。
在一个全栈项目开发完成之后，最后一步就是把它打包并部署到服务器上去，让互联网上的用户能够访问，这期视频，我们就看一下如何打包一个 vite 创建的前端应用，还有 express 创建的后端应用，并把他们部署到 vercel 这个函数计算服务提供商上边。
Vue 3 实战系列的视频来啦！我们会从寻找项目灵感开始，到创建项目、编写 HTML、编写 CSS、拆分组件、完成功能、优化代码结束。这一期是关于如何寻找项目灵感的，学完某个技术没 idea 的难题可以解决了。
给Vue 项目添加交互，主要是通过事件来响应用户的操作，还有使用生命周期回调，在组件加载或卸载的时候，做一些数据的处理。这期视频我们就给之前的留言板项目，添加一些事件交互。
在上期视频，我们配置好了 Vite 和 Tailwind CSS 的开发环境，因为 Tailwind CSS 是把常用的 CSS 封装成了 class，那么就有可能不用写一行 CSS 就实现页面样式，这期视频，我们只使用 HTML 来构建留言板的页面。
在上一家公司里，公司的产品用到了大量的图表进行数据可视化，当时公司决定使用的是 Echarts，它是一个与框架无关的 JS 图表库，所以需要自行封装到 react 或 vue 中。