首先 你待搭建一个ng项目
按照官网的教程 (node和npm是必需品)
https://angular.io/guide/quickstart (ng官网教程)
1.npm install -g @angular/cli
2.ng new my-app
3.cd my-app
4.ng serve --open
这一套跑下来你的ng项目已经搭建完成并在http://localhost:4200/里面运行了
引入Bootstrap
https://v3.bootcss.com/getting-started/#download (Bootstrap官网下载教程)
npm install bootstrap@3
官网上给的是这个
但是我跑的是这个
npm install ngx-bootstrap bootstrap --save
安装成功
在项目根目录打开 angular-cli.json,没有angular-cli.json 的就打开angular.json(ng6.x以上版本angular-cli.json改为angular.json)
然后在styles和scripts加入对应文件
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
]
找到style.css
在里面加入@import '~bootstrap/dist/css/bootstrap.min.css';
这一套下来 bootstrap 就算安装完成了
引入全局组件
emmm我引入的是一个全局头部组件
ng g component xxx
ng g component coffee/header
coffee是自定义文件夹的名称,header 也是自定义文件夹的名称
搭建成功~
在你的项目目录里面显示的是这个样子的
header里面的文件是系统帮你生成并引入好的
如果想自己手动新建文件夹,需要在app.module.ts,header.module.ts里面手动配置文件
(我个人感觉有点麻烦,而且我是新手 容易配置错,所以就选了敲命令行了)
然后我们打开header.component.html写上你要的样式
然后再主页app.component.html里面引入
至于为什么是<app-header></app-header>这个标签呢
刚才截图里面也圈出来了
在header.component.ts里面定义的
@Component({
selector: 'app-header',//就这个
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
然后打开你的浏览器
你的组件已经在首页里面展示出来了