2018-09-12 Angular项目中使用adminLTE2

简述

做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 [email protected] --save，然后重新引用对应的JS "../node_modules/admin-lte/dist/js/app.js" ，重新启用server，发现还是不对
• 继续降bootstrap的版本，指定版本为npm i [email protected] --save
  ng server之后就发现效果出来了，问题也就解决了。[图片上传失败...(image-79745f-1536745969587)]