关于ng-zorro-antd阿里的UI框架

Posted 2023-03-15

参考技术A 这个UI框架也是楼主接触项目后才了解到的，是阿里事业部的团队做的，可是说这个框架就是专门为angular而做的，也不是别的框架不能使用这套UI，大家去看看ant的官网就知道什么回事了。

ng-zorro-antd的版本也是跟随angular的版本实时更新的，目前最新版本的antd已经支持angular7了，一般在新项目创建之后就可以安装ng-zorro-antd了。

假具体步骤：

ng new 项目名

cd 项目文件夹

ng add ng-zorro-antd

然而这里会有一个坑，大家这么做之后肯定会报错，为什么呢？

因为add只是加入这个UI框架，你还没有安装，加入个啥呢？官网其实也写到了，只是写的顺序让一些初学者不得不去踩这个坑。

真具体步骤：

ng new 项目名

cd 项目文件夹

npm install ng-zorro-antd --save

ng add ng-zorro-antd

上面这套才能正确的把ng-zorro-antd加入到你的项目中，加入之后再ng serve启动项目，出现了ng-zorro的图标就表示这个UI框架已经成功融入了你的项目。

然后阿里的这个antd框架官网也非常简便，可能国人制作也知道国人的习惯，大家使用起来跟bootstrap一样使用即可，都是属性标签里使用，个人觉得antd的亮点在于可以节省非常多的时间，比如生成一个对话框，直接套用官方给的modal组件即可使用，对话框的确定/取消事件也包含了。