Angular UI框架 Ng-alain @delon的腳手架的生成開發模板
前言
首先感謝下 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 -
Angular UI框架 Ng-alain @delon的腳手架的生成開發模板