将 Bootstrap 添加到 CLI 应用程序

一个常用的 CSS / Javascript 库是 Bootstrap 。要首先将其安装到 Aurelia CLI 驱动的应用程序中，你需要使用 Npm 进行安装。

npm install bootstrap --save

因为 Bootstrap 对 jQuery 有很强的依赖性，所以我们需要确保我们还安装了 jQuery：

npm install jquery --save

现在，在你首选的 IDE /代码编辑器中，打开项目目录中的以下文件：aurelia_project/aurelia.json 并向下滚动到文件末尾的 build.bundles 部分。我们想要将 Bootstrap 添加到其中一个包中。对于此示例，我们将 jQuery 和 Bootstrap 添加到供应商包中。

"jquery",
{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": ["jquery"],
  "exports": "$",
  "resources": [
    "css/bootstrap.css"
  ]
}

这将使你的应用程序中的 Bootstrap 可访问，并可通过代码中的 import 'bootstrap'导入（这是上面定义的 name 属性）。请注意我们的 bootstrap 定义的 "deps": [] 部分中对 jquery 的引用。我们还指定我们想使用 "resources":[] 属性在我们的主 vendor-bundle.js 文件中绑定 Bootstrap 的 CSS

最后也是最重要的是，要使用我们新添加的 Bootstrap 依赖项，我们首先要在 main.js 文件中导入 Bootstrap 库，方法是在文件的开头添加以下内容。

import 'bootstrap';

我们希望从整个应用程序可以全局访问的地方包含 Bootstrap CSS，因此在 app.html 内部将以下内容放在 <template></template> 标签之间。

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