前言
首先感謝下 cipchk基於 Ng-Zorror 框架上制作的ng-alain 。
之前很早就關注了 ng-alain,今天得空折騰了下。
折騰的時候發現官方文檔有些坑,沒有寫清楚,所以我作為一些補充吧~
之前在微軟MVP群里,董斌輝邀請了cipchk做了一次分享,厚着臉皮要了PPT,看了看ng-alin的定位。跟我的項目契合度 很高。那么我們就試試水唄。
正文
說事情,要PPT別找我。
如何使用 安裝&配置
第一種方式:
直接 clone git 倉庫
$ git clone --depth=1 https://github.com/cipchk/ng-alain.git my-project
cd my-project
# 安裝依賴包
npm install
# 啟動
npm start
# 使用HMR啟動
npm run serve:hmr
成功運行了是吧,但是有個問題?我們要是真在這上面開發功能,那不是GG了。刪除一大堆組件都累死了。
所以Ng-alain提供了一個腳手架構建工具@delon。
這就是我提高的第二種方式。
@delon/cli 是基於 Angular Cli 向上構建的針對 ng-alain 腳手架的命令行工具,因此在安裝之前要先確保以下類庫應該安裝:
第二種(推薦方式)
因為官方的文檔有坑,所以才有這篇文檔~
安裝&配置
首先我們要安裝
npm install -g @angular-devkit/core @angular-devkit/schematics @schematics/schematics rxjs
npm install -g @angular/cli
@delon/cli 允許你全局安裝或只針對本地項目,對於全局后期所有命令都無需填寫 --collection 選項。
全局安裝:
npm install -g @delon/cli
我們先是使用@AngularCli工具生成一個項目。
ng new my-dream-app
默認進行npm包的下載。
運行程序保證不報錯,這一步蠻重要的。
npm start
然后我們干一個事情,
然后設置 .angular-cli.json 的默認 collection:
"defaults": {
"schematics": {
"collection": "@delon/cli"
}
}
進入到my-dream-app文件夾中
然后我們刪除其他不需要的文件。
這個時候再來執行,
npm install @delon/cli --save-dev
安裝@delon/cli到本地,然后就可以創建ng-alain的模板了
ng new -c=@delon/cli lonely
然后就是慢慢等待包的還原,還原完畢后。
cd lonely
npm start
編譯完成后自動會打開http://localhost:4200/#/dashboard
最后的效果圖就是:
以上就是全部了。
尾聲
ng-alain 還很年輕,中間會有很多的bug,作者看起來是全職在搞,畢竟看到PR的人不是很多,我主要是搞后端,后期會用幾個項目和ng-alain進行配套。
最后希望國內高質量的開源項目會越來越多。
- About Me-
- END -