如何在 Visual Studio 2019 本地安装 Popper答案

【问题标题】：How to install Popper in Visual Studio 2019 locally如何在 Visual Studio 2019 本地安装 Popper
【发布时间】：2020-06-09 10:32:35
【问题描述】：

我正在尝试在 Visual Studio 2019 中安装 popper.js。我正在使用 MVC 制作一个 .NET Core 应用程序。在我的一个视图中，我需要使用引导程序中的下拉菜单，因此我需要包含 Popper。当我使用带有 CDN 链接的 <script> 标签时，它可以正常工作。问题是此应用程序将托管在专用网络上。所以我不确定要使用该应用程序的计算机是否能够连接到互联网。

所以我想在本地安装这些文件，我尝试使用 Visual Studio 中的库管理器并安装了 popper.js@2.4.1

但是当我尝试在我的项目中包含文件时它不起作用。我在 popper.js 文件夹中有 3 个子文件夹：cjs、esm 和 umd。在 Popper 网页中，它说与 <script> 标签一起使用的是 umd。所以我试图在我的 html 中包含这个参考：

<script src="~-/lib/popper.js/umd/popper.js"><script>

但我的下拉菜单仍然不起作用。有什么我做错了吗？有没有其他安装 Popper 的方法？

（html中引用的顺序我认为是正确的：jquery.js、popper.js、bootstrap.js）

【问题讨论】：

标签： javascript asp.net-core installation visual-studio-2019 popper.js

【解决方案1】：

在document，

下拉菜单基于第三方库 Popper.js 构建，该库提供动态定位和视口检测。确保在 Bootstrap 的 JavaScript 之前包含 popper.min.js 或使用包含 Popper.js 的bootstrap.bundle.min.js / bootstrap.bundle.js。尽管不需要动态定位，但 Popper.js 不用于在导航栏中定位下拉菜单。

我发现在我的Shared/_layout.cshtml,<body></body> 中包含脚本：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

然后我像这样将 bootstrap.js 添加到<body></body>：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

然后您可以在视图中使用下拉菜单。这是一个演示：

查看：

<h1>TestDropDownList</h1>
<div>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
    <div class="dropdown show">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
</div>

结果：

【讨论】：

好的，谢谢，这行得通。但是，如果我同时包含bootstrap.bundle.js 和bootstrap.js，似乎我必须在下拉菜单上单击两次才能激活它。但如果我只留下bootstrap.bundle.js，它会很好用。