1.下载 Admin LTE,并解压到本地
2.将解压所得的三个文件夹:bower_components、dist、plugins,拷贝至ng目录的src/assets下
更新(2018/05/18):原方法会造成ng serve缓慢,并在build后,在assets文件夹下产生大量文件,不利于部署
1.分别npm install bootstrap/jQuery/adminlte三个依赖包
3.用编辑器打开admin LTE解压文件夹内的index2.html
4.拷贝引用的css内容至ng目录下angular-cli.json的styles内,同时修改为正确的路径,如下:
1 | "styles": [ |
5.拷贝index2.html内的js引用,至angular-cli.json的scripts内(可根据用到的功能自行增删),同时修改为正确的路径,如下:
1 | "scripts": [ |
6.【可选】拷贝index2.html内的google fonts引用,至ng目录src/index.html的head标签内
7.为src/index.html的body标签添加class(此处依据index2.html的body拥有的class),如下:
1 | <body class="hold-transition skin-blue sidebar-mini"> |
8.拷贝index2.html中body下div.wrapper全部内容,至ng目录下src/app/app.component.html中
9.运行ng serve –open
10.依据页面情况,调整缺失图片的相关路径即可
11.创建各部分组件,将对应内容分配到组件中,如下(app.component.html)
1 | <div class="wrapper"> |
参考链接: