简述
做angular项目已经有一段时间了，自己想尝试自己搭建一下框架。所有直接选择了adminLTE框架，本身并不复杂，但是却因为版本的问题，遇到了一些问题。所以总结一下，希望能帮助到需要的人。（adminLTE是一个基于bootstrap3的前端框架，里面集成了很多bootstrap和JQuery的功能和样式，是做管理系统的很好的选择）
1、搭建步骤
1.1 angular/cli（1.2.1）搭建基础的脚手架
1.2 使用adminLTE框架
安装相关的依赖包
- 首先安装admin-lte
npm i admin-lte --save默认安装了最新版本 - 安装bootstrap
npm i bootstrap --save默认也安装了最新版本 - 安装jQuery
npm i jquery --save
在angular-cli.json scripts中引入相关的JS文件
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/admin-lte/dist/js/adminlte.js"
]
在styles.css中引入需要的样式
@import "../node_modules/bootstrap/dist/css/bootstrap.css";
@import "../node_modules/font-awesome/css/font-awesome.css";
@import "../node_modules/admin-lte/dist/css/AdminLTE.min.css";
注意：不管是在引入js的时候还是css时，引入的顺序很重要，不然就会报错或者达不到想要的效果
后期可以根据项目的需要下载安装更多的包，然后在对应的引入需要的延时和JS文件
快速的搭建adminLET效果
最快的方法是，直接使用"../node_modules/admin-lte/starter.html"目录下的HTML文件，直接复制到index.html，这样基础的侧边栏和最上层的head框架都有了（后期可以在这基础上分离封装成组件模块）。
这样照理来说应该就可以了，但是ng server之后发现右上角的样式完全不对
[图片上传失败...(image-583856-1536745012741)]
和官网的样式也比对了好久，样式的class名称都是一样的，但是奇怪的是里面写的样式确实完全不一样的。导致整个布局都乱了。在项目中搜索对应的样式，出现了一堆，也不知道从何改起。
后面比对了我们现有的项目，发现adminLTE和bootstrap的版本和这个不一致，所有选择尝试降级版
- 显示删除了adminLTE现在的包，然后重新安装了指定版本的
npm i admin-lte@2.3.11 --save，然后重新引用对应的JS "../node_modules/admin-lte/dist/js/app.js" ，重新启用server，发现还是不对 - 继续降bootstrap的版本，指定版本为
npm i bootstrap@3.3.7 --save
ng server之后就发现效果出来了，问题也就解决了。[图片上传失败...(image-79745f-1536745969587)]
网友评论