javascript - 如何在本地安装 Visual Studio 2019 中的 Popper

问题描述

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

所以我想在本地安装这些文件，我尝试使用 Visual Studio 中的 lib 管理器，我已经安装了 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）

标签： javascriptasp.net-coreinstallationvisual-studio-2019popper.js

在文件中，

下拉菜单基于第三方库 Popper.js 构建，该库提供动态定位和视口检测。请务必在 Bootstrap 的 JavaScript 之前包含 popper.min.js 或使用bootstrap.bundle.min.js / bootstrap.bundle.js包含 Popper.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>

结果：

javascript - 如何在本地安装 Visual Studio 2019 中的 Popper

问题描述

解决方案

推荐阅读