创建新的 nx 应用程序 - Javascript

介绍

Nx 是一个工具，它帮助你创建、测试和管理大型代码库。 Nx 提供了一些模板和构建方针，可以生成干净、可读和容易维护的代码。 Nx 还提供了一些工具，帮助你更好地管理依赖、测试和部署。

在本教程中，我们将学习如何使用 Nx 创建新的 JavaScript 应用程序。

先决条件

在开始本教程之前，确保你已经安装了 Node.js 以及 npm 或 yarn。

步骤

以下是创建新的 Nx JavaScript 应用程序的基本步骤：

步骤 1：安装 Nx

在创建新的 JavaScript 应用程序之前，我们需要先安装 Nx。

npm install -g nx

或者，如果你使用 Yarn：

yarn global add nx

步骤 2：创建 Nx 应用程序

创建一个新的 Nx 应用程序需要使用 create-nx-workspace 命令。

nx create my-app

在运行此命令时，你将被要求选择一个工作区类型。你可以选择一个空工作区、一个保持一致性的工作区（使用预定义的配置文件）或者一个基于某个样板的工作区。对于此教程，我们将选择一个空工作区。在提示中选择 empty。

? What to create in the new workspace empty

然后，你将被要求选择一个应用程序类型。对于此教程，我们将选择 JavaScript 应用程序。在提示中选择 web。

? Application name my-app
? Default stylesheet format CSS
? Use Nx Cloud? No
? What to create in the new application web app

运行完以上命令之后，你可以通过以下命令进入到应用程序的目录。

cd my-app

步骤 3：启动应用程序

启动应用程序非常简单。

nx serve

这将启动一个本地调试服务器，并打开你的应用程序。你可以访问 http://localhost:4200/ 来查看你的应用程序。

步骤 4：修改代码

现在，你可以修改代码并即时看到结果。在本教程中，我们将打开 src/app/app.component.ts 文件并对其进行编辑。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

我们将更改 title 变量的值，以便在页面上显示不同的文本。将 title 变量的值更改为 Welcome to my-app!。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Welcome to my-app!';
}

保存并重新加载应用程序。你应该会看到页面上的标题已经更改为“Welcome to my-app!”。

结论

恭喜！你已经成功地创建了一个新的 Nx JavaScript 应用程序。现在，你可以自由地修改应用程序，构建新的功能和测试代码。享受编码吧！