將 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>