Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
前言:
在之前的一篇文章已经介绍过了,公司正在使用NG-ZORRO组件库开发后台应用,并且详细的介绍了Angular开发环境的搭建和项目的创建。这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。
NG-ZORRO介绍:
官网地址:https://ng.ant.design/docs/introduce/zh
ng-zorro-antd
是遵循 Ant Design 设计规范的 Angular UI 组件库,主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。
NG-ZORRO特性:
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 Angular 组件库,与 Angular 保持同步升级。
- 使用 TypeScript 构建,提供完整的类型定义文件。
- 支持 OnPush 模式,性能卓越。
- 数十个国际化语言支持。
- 深入每个细节的主题定制能力。
创建一个Angular项目:
angular环境配置参考:https://www.cnblogs.com/Can-daydayup/p/14166192.html
在创建项目之前,请确保
@angular/cli
已被成功安装。
执行以下命令,@angular/cli
会在当前目录下新建一个名称为 YyFlight-NG-ZORRO的文件夹,并自动安装好相应依赖。
ng new YyFlight-NG-ZORRO
自动完成 ng-zorro-antd
的初始化配置(推荐,简单快速):
进入新建的Angular项目目录(YyFlight-NG-ZORRO)中:
cd YyFlight-NG-ZORRO
初始化ng-zorro-antd配置:
注意:执行以下命令后将自动完成 ng-zorro-antd
的初始化配置,包括引入国际化文件,导入模块,引入样式文件等工作。
ng add ng-zorro-antd
【重要】设置项目的相关配置,并选择模板创建项目:
Skipping installation: Package already installed? Enable icon dynamic loading(正在跳过安装:包已安装?启用图标动态加载):y
set up custom theme file(设置自定义主题文件):y
choose your locale code(选择区域设置代码):ZH-CN
choose template to create project(选择模板创建项目):sidemenu (页面菜单)
启动调试查看页面效果:
ng serve --port 0 --open
手动安装ng-zorro-antd:
安装组件:
npm install ng-zorro-antd --save
如果上面命令安装失败,可以试试下面的cnpm安装:
cnpm install ng-zorro-antd --save
引入样式:
在 angular.json
中引入:
{ "styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ] }
在 style.css
中引入css样式文件:
@import "~ng-zorro-antd/ng-zorro-antd.min.css";
在 style.less
中引入 less 样式文件:
@import "~ng-zorro-antd/ng-zorro-antd.less";
引入组件模块:
以下面的 NzButtonModule
模块为例,先引入组件模块:
import { NgModule } from '@angular/core'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ NzButtonModule ] }) export class AppModule { }
然后在模板中使用:
<button nz-button nzType="primary">Primary</button>
相关文章
- 为什么有的人学完Netty 都还不知道BIO|NIO|AIO 的区别?
- 10分钟快速入门Netty 比写NIO爽百倍
- 熬夜手绘netty线程模型图 如果还不懂的话,那我...
- Netty 是如何解决拆包和 粘包问题 ?最后一种方案最香
- Netty 如何通过心跳检测机制实现空闲自动断开
- .NET Core如何通过认证机制访问Kafka?
- .net 温故知新:【10】.NET ORM框架EFCore使用入门之CodeFirs、DBFirst
- 一次 Redis 事务使用不当引发的生产事故
- 安卓项目五子棋代码详解(三)
- 安卓项目五子棋代码详解(二)
- 安卓项目五子棋代码详解(一)
- 【深入浅出Seata原理及实战】「入门基础专题」探索Seata服务的AT模式下的分布式开发实战指南(2)
- Nexus私有maven库部署和使用
- 【深入浅出Seata原理及实战】「入门基础专题」带你透析认识Seata分布式事务服务的原理和流程(1)
- 【SpringBoot实战专题】「开发实战系列」从零开始教你舒服的使用RedisTemplate操作Redis数据
- Kotlin学习快速入门(12)—— 位运算符
- Spring Boot命令指定环境启动jar包
- 【Redis 技术探索】「数据迁移实战」手把手教你如何实现在线 + 离线模式进行迁移 Redis 数据实战指南(scan模式迁移)
- 【Redis 技术探索】「数据迁移实战」手把手教你如何实现在线 + 离线模式进行迁移Redis数据实战指南(离线同步数据)
- Window系统的mysql数据库定时备份