将Bootstrap应用到Aurelia项目中

很多时候，页面样式的问题让人头疼。而Bootstrap则是一个很好的前端框架，那么如何在Aurelia中引入Bootstrap框架呢。

引用Bootstrap的方法有很多种，这里介绍的是一种适合与Aurelia Cli命令工具的方法，不过我想在webpack中也可以使用（也可能会出问题，暂时先介绍这一种）.

1.  npm安装Bootstrap 。 （这里用的是Bootstrap的最新版本V4）。

npm install [email protected] --save

2.   npm安装Jquery和Popper.js 。这些都是Bootstrap V4中所需要的.

npm install jquery popper.js --save

3.   配置aurelia.json (在aurelia_project/aurelia.json下)。修改vendor-bundle.js 和 dependencies依赖如图

"node_modules/popper.js/dist/umd/popper.min.js",

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

4.  在app.html中引入

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

5.   在app.js头部中引入bootstrap

 import 'bootstrap';

这是就可以在控件中使用来自bootstrap的class样式或者标签图案了。