Angular2-使用Angular-CLI快速搭建工程(二)

使用iconfont

iconfont是阿里巴巴的icon項目,阿里巴巴使用,也公開對外使用,現在一些公司都使用了,它有CDN,訪問快,用起來也很方便,這章節講下如何使用iconfont;(當然,本質上就是引用一個icon的font文件,無論用bootstrap的還是自己做的,都是一樣的,希望讀者觸類旁通)

iconfont上創建工程

具體怎麼做已經超出本文範圍;有興趣的可以自己學習;

我們選擇一個做實驗


最終寫出一個css文件,在styles.css中


安裝@angular2-material/icon

npm install @angular2-material/icon

在app.module.ts中添加以下代碼


在剛剛的home.component.html中添加icon


啓動應用 ng serve



這,我們就看到了我們選的圖標了;

編譯

Angular-CLI編譯的配置都幫我們寫好了

開發環境輸入 ng build 

生產環境:ng build --prod,這裏對比下前後的差異


開發環境編譯

生產環境編譯

對比可以看到,生產環境把3M的壓縮到了1M(還不夠,還應該優化,我後續會繼續努力),生產的文件還加了MD5,這樣可以避免瀏覽器緩存;

我們走過的路:

如此,我們的Angular-CLI的搭建完了,我們可以具備什麼能力了?

(1)創建一個可用於開發,測試,生產的工程;

(2)具備路由的能力,按需加載,代碼分割;

(3)我們可以添加外部的css,js我沒講,其實原理相同;

(4)集成angular2 material;

(5)添加自己的icon font;

(6)開發環境和生產環境的編譯;

上面涵蓋的內容應該可以用來開發一個簡單的工程了。剩下的內容就靠angular的具體內容和typescript的熟練程度了。

當然,作爲生產中,上述的內容還略顯不夠,我們還沒提到集成一些組件,比如用js寫的組件怎麼集成進來。測試如何進行?我後續會繼續推出,請關注我!我個人更傾向於用angular2-webpack-seed來開發生產的代碼(目前正在用它開發一個網站),因爲它配置起來更方便,但是有時候真是精力有限,應該也會用angular-cli,它卻是省時省力!

發佈了0 篇原創文章 · 獲贊 11 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章