Angular UI框架 Ng-alain @delon的腳手架的生成開發模板


前言

首先感謝下 cipchk基於 Ng-Zorror 框架上制作的ng-alain 。
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

image.png

默認進行npm包的下載。

運行程序保證不報錯,這一步蠻重要的。
npm start

然后我們干一個事情,
angular-cli.json

然后設置 .angular-cli.json 的默認 collection:

"defaults": {
  "schematics": {
    "collection": "@delon/cli"
  }
}

delon/cli
進入到my-dream-app文件夾中
然后我們刪除其他不需要的文件。
如圖所示
這個時候再來執行,

npm install @delon/cli --save-dev

安裝@delon/cli到本地,然后就可以創建ng-alain的模板了

ng new -c=@delon/cli lonely 

image.png
然后就是慢慢等待包的還原,還原完畢后。

cd lonely
npm start

編譯完成后自動會打開http://localhost:4200/#/dashboard
最后的效果圖就是:
腳手架

以上就是全部了。

尾聲

ng-alain 還很年輕,中間會有很多的bug,作者看起來是全職在搞,畢竟看到PR的人不是很多,我主要是搞后端,后期會用幾個項目和ng-alain進行配套。
最后希望國內高質量的開源項目會越來越多。

  • About Me-

image

  • END -

image


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM