Angular实战之使用NG-ZORRO创建一个企业级中后台框架（入门篇）
<h2>前言：</h2><p> 在之前的一篇文章已经介绍过了，公司正在使用NG-ZORRO组件库开发后台应用，并且详细的介绍了Angular开发环境的搭建和项目的创建。这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。</p>
<h2>NG-ZORRO介绍：</h2>
<p>官网地址：https://ng.ant.design/docs/introduce/zh</p>
<blockquote>
<p><code>ng-zorro-antd</code> 是遵循 Ant Design 设计规范的 Angular UI 组件库，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</p>
</blockquote>
<h2>NG-ZORRO特性：</h2>
<ul>
<li>提炼自企业级中后台产品的交互语言和视觉风格。</li>
<li>开箱即用的高质量 Angular 组件库，与 Angular 保持同步升级。</li>
<li>使用 TypeScript 构建，提供完整的类型定义文件。</li>
<li>支持 OnPush 模式，性能卓越。</li>
<li>数十个国际化语言支持。</li>
<li>深入每个细节的主题定制能力。</li>
</ul>
<h2>创建一个Angular项目：</h2>
<p>angular环境配置参考：https://www.cnblogs.com/Can-daydayup/p/14166192.html</p>
<blockquote>
<p>在创建项目之前，请确保 <code>@angular/cli</code> 已被成功安装。</p>
</blockquote>
<p>执行以下命令，<code>@angular/cli</code> 会在当前目录下新建一个名称为 YyFlight-NG-ZORRO的文件夹，并自动安装好相应依赖。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">ng new YyFlight-NG-ZORRO
</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1336199/202012/1336199-20201221235934319-1657963958.png" alt="" loading="lazy"></p>
<h2>自动完成 <code>ng-zorro-antd</code> 的初始化配置（推荐，简单快速）：</h2>
<h3><strong>进入新建的Angular项目目录(YyFlight-NG-ZORRO)中:</strong></h3>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">cd YyFlight-NG-ZORRO</pre>
</div>
<h3><strong>初始化ng-zorro-antd配置：</strong></h3>
<p>注意：执行以下命令后将自动完成 <code>ng-zorro-antd</code> 的初始化配置，包括引入国际化文件，导入模块，引入样式文件等工作。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">ng add ng-zorro-antd</pre>
</div>
<p><strong><span style="color: rgba(255, 0, 0, 1)">【重要】设置项目的相关配置，并选择模板创建项目： </span></strong></p>
<p>Skipping installation: Package already installed? Enable icon dynamic loading（正在跳过安装：包已安装？启用图标动态加载）：y</p>
<p>set up custom theme file（设置自定义主题文件）：y</p>
<p>choose your locale code（选择区域设置代码）：ZH-CN</p>
<p>choose template to create project（选择模板创建项目）:sidemenu (页面菜单)</p>
<p><img src="https://img2020.cnblogs.com/blog/1336199/202012/1336199-20201222011238611-2095461058.png" alt="" loading="lazy"></p>
<h3>启动调试查看页面效果：</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">ng serve --port 0 --open</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1336199/202012/1336199-20201222013227599-1879345132.png" alt="" loading="lazy"></p>
<h2>手动安装ng-zorro-antd：</h2>
<h3><strong>安装组件：</strong></h3>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">npm install ng-zorro-antd --save<br><br>如果上面命令安装失败，可以试试下面的cnpm安装：<br><br>cnpm install ng-zorro-antd --save</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/1336199/202012/1336199-20201222002115760-178343999.png" alt="" loading="lazy"></p>
<h3><strong>引入样式：</strong></h3>
<p><strong>在 <code>angular.json</code> 中引入：</strong></p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">{
"styles": [
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
]
}</pre>
</div>
<p><strong>在 <code>style.css</code> 中引入css样式文件：</strong></p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">@import "~ng-zorro-antd/ng-zorro-antd.min.css";
</pre>
</div>
<p><strong>在 <code>style.less</code> 中引入 less 样式文件：</strong></p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">@import "~ng-zorro-antd/ng-zorro-antd.less";
</pre>
</div>
<h3 id="引入组件模块">引入组件模块：</h3>
<p>以下面的 <code>NzButtonModule</code> 模块为例，先引入组件模块：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">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 { }</pre>
</div>
<p>然后在模板中使用：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><button nz-button nzType="primary">Primary</button> </pre>
</div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
<blockquote >
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者名称：</span>追逐时光者</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者简介：</span>一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。如果该篇文章对您有帮助的话，可以点一下右下角的【♥推荐♥】，希望能够持续的为大家带来好的技术文章，文中可能存在描述不正确的地方，欢迎指正或补充，不胜感激。
</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/Can-daydayup/p/14170872.html
頁:
[1]