使用 Node.js、Vue.js 3 和 PostgreSQL 的全栈 TypeScript - 简介

在本系列教程中，我们将使用 Node.js 和即将推出的 Vue.js 3 从头开始​​编写一个功能齐全的TypeScript应用程序。目标是以全面易懂的方式介绍构建全栈 TypeScript应用程序的过程，以便您可以从头到尾逐步了解它。

本教程不仅涵盖前端部分，还涵盖后端部分以及其间的所有内容：从设置数据库到设计数据库模式，使用 REST 和 GraphQL 端点公开 API，直到应用程序部署。

查看现场演示

本系列将教您如何连接不同的层级，从而创建一个功能齐全的 Web 应用。本系列旨在帮助您全面了解 Web 应用的构建过程，以便您能够从零开始（或者更确切地说，从头到尾）构建自己的应用所需的所有元素和技术。

目标

在本系列中，我们将构建另一个任务管理应用。我决定展示如何创建另一个任务管理器，是因为这类应用的概念简单易懂。您已经了解什么是任务，知道可以对任务进行分组或过滤，或者可以将任务标记为已完成。您可能自己也曾经使用过任务管理器。因此，与其花时间解释业务功能及其结果，不如从实际出发，专注于构建实际的应用。

技术堆栈

在后端，我们将使用Node.js 14.x+；在前端，我们将使用名为 Vue.js 的 UI 框架，特别是即将推出的（目前处于测试阶段）Vue.js 3，它引入了Composition API（类似于 React.js 中的 Hooks）。对于数据库层，您将使用PostgreSQL——可能是目前最好的数据库。;) 我将向您展示如何设计数据库模式、如何创建表以及如何在它们之间建立关系。我们还将了解如何使用 PostgreSQL 作为 NoSQL 解决方案，以及它与 MongoDB 等数据库的比较。对于 UI，我们将做一些不同的事情。我们不会手写 CSS，而是使用Tailwind CSS，它提供了一组预定义的构建块，我们可以直接在 HTML 页面中组合它们，以快速创建连贯的 UI。最后，Kretes会将所有这些工具整合到一个可立即使用的解决方案中（就像是强化版的样板），这样您就可以专注于构建实际的应用程序及其业务逻辑，而不必花时间手动配置和组合 TypeScript、Node.js、Vue.js 或 PostgreSQL 等。

未来

本教程旨在涵盖 Web 开发的现代方法。在某些时候，我们可能会切换技术栈中的某些部分。例如，我们可能会尝试用Deno替换 Node.js，或用Solid.js框架替换 Vue.js ，等等。我们的目标是追踪 Web 开发的当前趋势和趋势，而不是沿用旧的、已经成熟的 Web 应用程序创建方法，同时也为您提供一个早期示例，教您如何使用这些现代解决方案构建全栈 TypeScript 应用程序。换句话说，我们的目标是探索构建 Web 应用程序的全新或改进方法。

计划

1. 使用 Tailwind CSS 设计应用程序 UI
2. 使用 Vue.js 3 使应用程序具有交互性
3. 实现后端
4. 定义并公开 REST API
5. 设计基本数据库模式

请继续关注本系列的下一部分！

视频教程

如果您更喜欢观看编程教程而不是阅读它们，请查看YouTube 上的这个视频系列，我在其中逐步编写了此应用程序的代码。

如果您喜欢这个 TypeScript 系列，请查看我的其他视频教程。