在 aurelia 应用程序中需要 bootstrap 和 jquery

Question

我是 Aurelia 的新手，所以我不太确定这应该如何工作。我创建了一个新的 Aurelia 项目，并通过 jspm install bootstrap 安装了 bootstrap。我在控制台中看到这也引入了 jquery 3.0.0。

现在我的问题是，如何在我的项目中使用 bootstrap.css、bootstrap.js 和 jquery.js？

第一次尝试：

在 app.html 中，我尝试执行以下操作：

<require from="bootstrap"></require>

我试过了，因为我的 config.js 中有以下行：

map: {
    ...
    "bootstrap": "github:twbs/bootstrap@3.3.6",
    ...
}

从加载 bootstrap.js 的意义上来说，这种方法是有效的，但随后会在浏览器中显示缺少 jquery.js 的错误。所以它不会自动为我加载 jquery。 这样正常吗？

第二次尝试：

我在 app.html 中将我的 require 更改为：

<require from="jquery/dist/jquery.js"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="bootstrap/js/bootstrap.js"></require>

我不确定它如何知道在哪里寻找 bootstrap.js 和 bootstrap.css 文件，因为它们位于：jspm_packages/github/twbs/bootstrap@3.3.6/css/bootstrap.css 等。但它知道如何找到bootstrap 个文件。但是不是 jquery 文件。

我的 config.js 里有这个 jquery:

map: {
    ...
    "github:twbs/bootstrap@3.3.6": {
      "jquery": "npm:jquery@3.0.0"
    },
    ....
}

所以基本上我的问题是，这应该如何工作？当我 <require from="bootstrap"> 时，应该 require 自动加载所有必需的文件吗？还是我仍然应该将它们作为单独的文件加载？如果是这样，在这种情况下我该如何加载 jquery？

Answer 1

require 元素用于拉入 Aurelia 组件、html 模板（即 Aurelia 组件）或 css 文件。它不是用于加载 javascript 个文件。

Aurelia 骨架展示了如何在其 main.js 文件中加载 Bootstrap：

import 'bootstrap';

是文件中的第一行。这将初始化 Bootstrap 的 javascript 代码。

在 app.html 中，一个 require 元素用于加载 Bootstrap 的 css:

<require from="bootstrap/css/bootstrap.css"></require>

将 jQuery 导入文件也非常简单：

import $ from 'jquery';

然后你就可以随心所欲地使用$函数了。

Answer 2

我遇到了这个问题，然后安装了最新的节点和 npm，然后从 aurelia 网站上的教程页面：-

要获得 Bootstrap 设置，我们首先使用 NPM 安装库本身。在命令行上执行以下命令来执行此操作：

npm install bootstrap --save

接下来，因为Bootstrap使用了jQuery，我们也想安装jQuery，像这样：

npm install jquery@^2.2.4 --save

然后随着软件包的更新重新启动应用程序并再次运行 ...已修复！

Answer 3

添加后导入 'bootstrap'；在 main.js 中，您可能需要停止应用程序 (Ctrl + c) 并再次运行 au 运行 --手表让它发挥作用。

在 aurelia 应用程序中需要 bootstrap 和 jquery

require bootstrap and jquery in aurelia app

aurelia

jspm