Question

我是Aurelia的新手，所以我不确定这应该如何运作。我创建了一个新的Aurelia项目，并通过bootstrap简单地安装了jspm install 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。 这是正常的吗？

第二次尝试：

我在require中将app.html更改为此内容：

<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等。但它知道如何查找引导程序文件。但不 jquery文件。

我在我的config.js中有jquery：

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

基本上我的问题是，这应该怎么做？我require时应<require from="bootstrap">自动加载所有必需的文件。或者我还应该将它们作为单个文件加载？如果是这样，我如何在这种情况下加载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

添加后 import'bootstrap'; 在main.js中，您可能需要停止应用程序（Ctrl + c）并再次运行它 au run - watch 使它工作。

在aurelia app中需要bootstrap和jquery

3 个答案: