📅 最后修改于: 2023-12-03 15:06:05.866000 🧑 作者: Mango
Angular CLI 是一个用于 Angular 应用程序的命令行界面工具。它提供了一些简单易用的命令，可以帮助我们快速地构建和开发 Angular 应用程序。
Yarn 是一个快速、可靠、安全的 JavaScript 包管理工具。它可以帮助我们简化包的安装和依赖管理过程，并且可以提供更快的速度和更好的性能。
在本文中，我们将使用 Yarn 和 Angular CLI 一起构建一个 JavaScript 应用程序。
在开始之前，请确保已经安装了 Node.js 和 Yarn。可以在终端中使用如下命令来检查：
$ node -v
$ yarn -v
如果输出了版本号，说明已经安装成功。
接下来，我们需要安装 Angular CLI。可以使用如下命令：
$ yarn global add @angular/cli
接下来，我们将使用 Angular CLI 创建一个新的 Angular 应用程序。可以使用如下命令：
$ ng new my-app
这个命令将会创建一个名为“my-app”的新应用程序，并且会自动安装所需要的依赖和模块。
接下来，进入新创建的应用程序目录：
$ cd my-app
然后，我们可以使用如下命令来启动应用程序：
$ ng serve
这个命令将会启动一个本地的开发服务器，并且会在浏览器中打开应用程序。当我们修改代码时，服务器会自动重新编译和刷新页面。
接下来，我们将添加一些依赖到我们的应用程序中。我们将使用 Yarn 来安装这些依赖。我们可以使用如下命令：
$ yarn add bootstrap jquery popper.js
这个命令将会安装 Bootstrap、jQuery 和 Popper.js 到我们的应用程序中。这些库将会用于我们的 UI 开发。
为了让我们的应用程序正常工作，我们需要修改一些配置。我们需要在“angular.json”文件中修改如下配置：
{
// ...
"projects": {
"my-app": {
// ...
"architect": {
"build": {
// ...
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
// ...
}
}
}
}
这个配置将会告诉 Angular CLI 在构建应用程序时使用我们添加的依赖。我们也需要将 Bootstrap 的 CSS 和 JavaScript 文件添加到“index.html”文件中：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
现在，我们可以重新启动应用程序，看看它是如何工作的：
$ ng serve
现在，我们的应用程序已经可以正常工作了！我们可以使用 Angular CLI 和 Yarn 进一步开发和优化我们的应用程序。