使用webstorm2018版新建angular6项目引入adminLTE样式的正确做法

      最近在使用webstorm2018使用学习angular6.0系列项目,看慕课网视频讲到引入adminLTE作为入门学习,但是他的视频是基于angular4.0系列的,当我新建angular项目就已经是6.0系列了,按照样式还是有一些不一样,经过踩过一些坑之后,现在把新版本正确的方式贴出来。

   在webstorm控制台输入cnpm install --save admin-lte安装adminLTE样式框架,如项目有需要,可以继续安装bootstrap和jquery。如下如所示:我安装之后的文件目录

使用webstorm2018版新建angular6项目引入adminLTE样式的正确做法

我之前就发现下载后在node_modules文件夹下除了我箭头表示的文件夹以外,还有一个前面没有下划线的admin-lte,我的经验告诉你们,这个没有下划线的引用无效!!!如下图所示:

使用webstorm2018版新建angular6项目引入adminLTE样式的正确做法

在里面找到starter.html这个文件,将里面的div部分完全覆盖你自己创建的angular项目中的app.component.html,另外还需要在你新建的项目中index.html的body后面添加上starter.html中的body后面的样式,如下图所示:

使用webstorm2018版新建angular6项目引入adminLTE样式的正确做法

 

 

最后,也是比较重要的,在angular.json文件中引入相应的css和js文件,注意路径一定是你通过cnpm下载adminLTE中的,不是你单独下载外面的bootstrap和js,具体参照starter.html中资源引入路径。如下如图所示:

使用webstorm2018版新建angular6项目引入adminLTE样式的正确做法