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 -