设置 MEAN 堆栈的组件

2025年3月17日 | 阅读 3 分钟

在上一节中，我们学习了 MEAN 堆栈的架构，它的组件如何相互连接，以及 MEAN 堆栈的一些特性。本节将设置我们的 MEAN 堆栈框架或设置 MEAN 堆栈组件，即 MongoDB、ExpressJS、AngularJS 和 NodeJS。

安装 Node

我们需要 NodeJS，因为我们将为我们的项目编写和运行 NodeJS 代码。我们的服务器端逻辑需要它，甚至 angular 也需要它。具有更复杂的构建工作流程的框架被称为 Angular。因此，我们需要 Node 来运行 NodeJS 代码。此 NodeJS 代码是为我们的后端和 Angular 构建工作流程编写的。

因此，我们将转到 https://node.org.cn/en/ 链接并从那里下载最新版本的 Node。

下载 Node 的可执行文件后，我们将通过简单地运行其可执行文件来安装 NodeJS。

Angular CLI

我们还将使用另一个工具，即 Angular CLI 或 Angular 命令行界面。由于构建工作流程更加复杂，我们需要大量工具来编译和优化我们的代码。 CLI 为我们提供了一个项目设置，我们可以在其中专注于编写 Angular 代码和我们的逻辑，仅此而已。我们将通过以下方式安装 Angular CLI

1) 我们将使用 npm（即 Node 包管理器）在我们的系统上全局安装 CLI 工具。当我们安装 NodeJS 时，Node 包管理器会自动安装。因此，如果我们有 NodeJS，我们就会有 npm。我们将运行以下命令来安装 CLI

2) 安装 Angular CLI 后，我们将使用 CLI 创建一个新的 Angular 项目，然后我们将稍后将 MongoDB、Node 和 Express 添加到该项目中。首先，我们将导航到我们想要创建项目的文件夹中，然后我们将通过以下方式使用 ng new 命令创建一个项目

当我们运行此命令时，它会问我们两个问题，即“您想添加 Angular 路由吗？”和“您想使用哪种样式表格式？”。如果您想包含 angular 路由，请按 'y'，并在项目中使用 CSS 格式。

3) 成功创建项目后，我们将导航到项目文件夹并运行以下命令

此命令用于启动仅供开发使用的服务器。我们不会使用此服务器来部署我们的项目或应用程序。因此，这是一个仅供开发使用的服务器，它允许我们预览我们的应用程序。

4) 此命令将为我们在我们的机器上运行一个真正的 Web 服务器。我们将转到我们的浏览器并访问它给出的地址。在此 URL 中，我们将看到如下屏幕

安装 IDE

现在，我们需要一个 IDE 或一些高级文本编辑器来更改我们的应用程序。这些高级文本编辑器使使用我们的代码变得更加容易。我们将安装 visual studio IDE，因为它免费、功能强大且高度可扩展。它适用于 Windows，也适用于 Mac 和 Linux。我们将转到 https://vscode.js.cn/ 链接并选择安装程序版本（如果它没有自动选择正确的版本）。

下载安装程序后，我们将运行它并安装它。安装完成后，我们将打开它，它应该看起来像这样

我们将转到“文件”菜单并从那里打开我们的 first-app 项目，它看起来像

现在，我们首先需要安装一个特定的扩展。因此，我们将转到“视图”菜单并单击“扩展”。我们将搜索 Angular Essential 并将其安装在我们的 IDE 中。 Angular Essential 是增强 IDE 工作能力的不同扩展的惊人集合。我们还将搜索 Material Icon Theme。