将Bootstrap应用到Aurelia项目中

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

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

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

npm install bootstrap@4.0.0-beta --save2.  npm安装Jquery和Popper.js
。这些都是Bootstrap V4中所需要的.

npm install jquery popper.js --save3.  配置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样式或者标签图案了。