如何在 Visual Studio 2019 本地安装 Popper

Question

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

所以我想在本地安装这些文件，我尝试使用 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)

Answer 1

在document,

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

而且我发现在我的 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>

结果：

如何在 Visual Studio 2019 本地安装 Popper

How to install Popper in Visual Studio 2019 locally

javascript

installation

asp.net-core

popper.js

visual-studio-2019