如何将从 NuGet 引导程序包下载的添加到 wwwroot？

Question

我刚刚从 NuGet 下载了引导程序包，但我不明白如何在 /wwwroot/... 中找到它应该是什么（ASP.NET Core 2.X MVC 项目）。我没有使用VisualStudio的经验，我猜它可能会在VS的情况下自动生成。我可以在 Rider 中做什么？

Answer 1

有许多工具可以在 VisualStudio 和 Rider 中安装客户端包，如 JQuery、bootstrap、AngularJs 等。由于 Asp.Net Core 项目不允许你使用 NuGet 包管理器来处理客户端依赖，你应该使用 NPM、yarn、webpack 或者对于 Visual Studio 用户，你可以使用库管​​理器（LibMan），这是一个轻量级的客户端- 端库获取工具。我将为在 Mac 或 Linux 环境中使用 JetBrains Rider 的开发人员和 Visual Studio 用户使用 LibMan 的开发人员解释 NPM 的用法。如果它的版本较低，您可以从同一屏幕更新。

对于 Visual Studio 用户：为了能够使用 LibMan，您应该拥有 VS 2017 版本 15.8 或更高版本。您可以从“帮助”->“关于 Microsoft Visual Studio”选项卡中查看。完成后，右键单击项目并选择添加 -> 客户端库。选择 cdnjs 提供程序并在库文本框中键入要安装的包的名称（引导程序、JQuery 等），然后单击安装按钮。安装完成后，您将看到在 wwwroot 文件夹中创建的 lib 文件。你可以跳过Mac用户部分和下面，我也为绝对初学者解释了如何使用参考。

对于 Mac/Jetbrains Rider 用户：转到以下路径：查看 -> 工具窗口 -> 终端并运行“npm install --save bootstrap”命令。由于没有 package.json，您可能会遇到 saveError。忽略它。

下载后（您可以直接从项目路径中查看）打开 Finder 并转到您的项目路径。创建一个名为 lib 的目录。（名称无关紧要，但文件夹应该在 wwwroot 文件下）。从 Node_Modules 中剪切 bootstrap 文件夹并将其粘贴到您创建的 lib 文件中。

这部分对于 Visual Studio 和 Jetbrains Rider 用户是相同的：

完成后，将以下链接（如果您有不同的路径，请使用该链接）添加到您的 _Layout 页眉（建议）或直接将引用添加到特定视图中：

<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>

并在正文中使用 div 封装 @RenderBody 并使用引导类（我使用容器）来查看是否应用了您的更改。

<div class="container">
    @RenderBody()
</div>

尝试在您的索引页面上添加一些带有 bootstrap 的 Html，看看您是否可以使用 bootstrap。如果您仍然没有看到，那么我建议您转到您的提交更改（Command + K）并确保您的引导文件位于正确的路径下。