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 -