天天看點

使用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樣式的正确做法