2021 年最值得推荐的 7 个 Angular 前端组件库 - DevUI
<p>摘要：DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导<code>沉浸</code>、<code>灵活</code>、<code>至简</code>的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 <code>ToB</code> 的<code>工具类产品</code>，DevUI 将是一个很不错的选择！</p><blockquote>
<p>DevUI是一支兼具设计视角和工程视角的团队，服务于华为云DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。<br><br>
官方网站：devui.design<br><br>
Ng组件库：ng-devui（欢迎Star）<br><br>
官方交流：添加DevUI小助手（devui-official）<br><br>
DevUIHelper插件：DevUIHelper-LSP（欢迎Star）</p>
</blockquote>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b68d4e4fe48b43959302635d57fd104b~tplv-k3u1fbpfcp-watermark.image"></p>
<p>Angular 是一款能够跨 Web、移动 Web、移动应用、原生应用和桌面原生应用多个平台的前端框架，经过数十年的发展，已形成了一个庞大的生态，基于Angular的组件库也是多如牛毛。</p>
<p>2021年如果你想尝试 Angular 框架，以下 Angular 组件库或许是不错的选择！</p>
<h1 id="1-material-design-for-angular">1. Material Design for Angular</h1>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db7e808f33a34b58813b8cbad99f2bdd~tplv-k3u1fbpfcp-watermark.image"></p>
<p>首先要推荐的，当然是 Angular 官方的 Material 组件库，Material Design 是 Google 的一套设计体系。</p>
<p>基于这套设计体系，官方和社区都提供了各种组件库，有Web端（Angular/React/Vue）的，也有移动端（Android/iOS/Flutter）的。</p>
<p>其中 Angular 版本的 Material 组件库，现在已经是Angular官方指定的组件库，所以受众特别多，不管是在Github的Star/Fork数，还是在NPM的周下载量都是TOP 1的。</p>
<p>以下是2021年4月19日的数据：</p>
<table>
<thead>
<tr>
<th>指标</th>
<th>数值</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star</td>
<td>21.4k</td>
</tr>
<tr>
<td>Fork</td>
<td>5.7k</td>
</tr>
<tr>
<td>NPM周下载</td>
<td>891,480</td>
</tr>
</tbody>
</table>
<p>Material Design for Angular早在2016年3月份就发布了第一个基于Angular 2的Alpha版本：<code>2.0.0-alpha.0</code>，中间演进了一年多，迟迟没有发布2.0的正式版本，直到第二年12月才发布基于Angular 5的<code>5.0.0</code>正式版本。</p>
<p>不过 Material Design for Angular 却不是最早的 Angular 组件库，后面我们将要介绍的 PrimeNG 比它更早诞生，但 Material 毫无疑问是最流行和最受欢迎的。</p>
<h1 id="2-ngngx-bootstrap">2. NG/NGX Bootstrap</h1>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bba111ae566d465eb33a40145a7b8898~tplv-k3u1fbpfcp-watermark.image"></p>
<p>Bootstrap 是Twitter推出的一个用于前端开发的开源工具包，也是非常受欢迎的HTML/CSS/JS框架，用于开发响应式布局、移动设备优先的Web应用。</p>
<p>它有多受欢迎呢？我们看一组数据就知道了。</p>
<table>
<thead>
<tr>
<th>框架/库</th>
<th>Star数</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vue</td>
<td>182k</td>
</tr>
<tr>
<td>React</td>
<td>167k</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>149k</td>
</tr>
<tr>
<td>Angular</td>
<td>72.5k</td>
</tr>
</tbody>
</table>
<p>从以上数据可以看到，Bootstrap甚至比Angular框架的Star数还多，可见Bootstrap的受欢迎程度，因此基于Bootstrap的Angular组件库也很受欢迎就不难想象了。</p>
<p>基于Bootstrap的Angular组件库主要有两款：</p>
<ul>
<li>NG Bootstrap</li>
<li>NGX Bootstrap</li>
</ul>
<p>NG Bootstrap 和 NGX Bootstrap 是两个不同的项目团队的两个不同的项目，它们都可以只使用Bootstrap无需使用jQuery就可以在Angular中使用。主要区别在于它们所支持的Bootstrap版本：</p>
<ul>
<li>NGX Bootstrap支持Bootstrap 3和4</li>
<li>NG Bootstrap支持Bootstrap 4，并且需要Angular5+</li>
</ul>
<p>从Github Star/Fork和NPM周下载量来看，它们也是相当的，NG Bootstrap似乎略占上风：</p>
<table>
<thead>
<tr>
<th>指标</th>
<th>NG Bootstrap</th>
<th>NGX Bootstrap</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star</td>
<td>7.7k</td>
<td>5.3k</td>
</tr>
<tr>
<td>Fork</td>
<td>1.4k</td>
<td>1.7k</td>
</tr>
<tr>
<td>NPM周下载</td>
<td>386,485</td>
<td>235,662</td>
</tr>
</tbody>
</table>
<p>从版本发布时间来看，NGX Bootstrap则要早一些：</p>
<table>
<thead>
<tr>
<th>指标</th>
<th>NG Bootstrap</th>
<th>NGX Bootstrap</th>
</tr>
</thead>
<tbody>
<tr>
<td>首次发布版本</td>
<td>1.0.0-alpha.0 2016年7月</td>
<td>1.0.1-beta.2 2016年1月</td>
</tr>
<tr>
<td>第一个正式版本</td>
<td>1.0.0 2018年1月</td>
<td>1.0.4 2016年2月</td>
</tr>
</tbody>
</table>
<p>从以上数据可以看出，不管是首次发布版本还是第一个正式版本，NGX Bootstrap都比NG Bootstrap早些，特别是第一个正式版本的发布时间，NGX Bootstrap比NG Bootstrap早了整整两年。</p>
<p>因此我们可以大致了解，NGX Bootstrap是一个比较早的库，并且能支持Angular 2+和Bootstrap 3+，而NG Bootstrap则比较新，需要Angular 5+和Bootstrap 4+才能使用。</p>
<p>如果你的项目是一个使用Angular 5+和Bootstrap 4+的新项目，建议使用NG Bootstrap，否则就使用NGX Bootstrap。</p>
<h1 id="3-ng-zorro">3. NG Zorro</h1>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89068f8d0b3a4867b36078c66c0ec2ee~tplv-k3u1fbpfcp-watermark.image"></p>
<p>第三个要重点推荐的Angular组件库是基于Ant Design设计体系的NG Zorro组件库。</p>
<p>Ant Design 是蚂蚁金服的一门设计语言，经历过多年的迭代和积累，它对UI的设计思想已经成为一套事实标准，受到众多前端开发者及企业的追捧和喜爱，也是React开发者手中的神兵利器。</p>
<p>作为Ant Design的Angular实现，NG Zorro不仅继承了Ant Design的独到思想和极致体验，同时也结合了Angular框架的优点和特性。组件的风格与Ant Design最新版本保持同步，组件的接口也尽量保持与Ant Design的React版本一致。</p>
<p>说Zorro是国内最受欢迎的Angular组件库，相信没有人会反对。</p>
<p>2017年8月，Zorro正式开源并发布第一个版本：<code>0.5.0-rc.0</code>，经过一年的演进，于第二年6月发布1.0版本。</p>
<p>从知乎来看，Zorro的社区反响非常好：https://www.zhihu.com/question/63992236</p>
<p>以下是2021年4月19日的数据：</p>
<table>
<thead>
<tr>
<th>指标</th>
<th>数值</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star</td>
<td>7.4k</td>
</tr>
<tr>
<td>Fork</td>
<td>2.6k</td>
</tr>
<tr>
<td>NPM周下载</td>
<td>35,941</td>
</tr>
</tbody>
</table>
<h1 id="4-nebular">4. Nebular</h1>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/727d86b3d84c47a3910e9e09bb78c662~tplv-k3u1fbpfcp-watermark.image"></p>
<p>Nebular 是一个可定制的Angular UI库，基于Eva Design设计规范，包含40多个UI组件，4个可视主题，认证和安全模块。</p>
<p>Nebular包含的组件并不多，只有40+个，不过它包含了很多实用的工具，比如：主题包、登录认证、角色鉴权管理、Admin系统等。</p>
<p>有这方面需求的话，还是可以尝试的。</p>
<p>Nebular的发布时间和Zorro的很接近，都是17年8月份发布第一个版本，第二年发布第一个正式版本，不过从Github Star/Fork和NPM周下载量来看，Nebular稍微逊色一些：</p>
<table>
<thead>
<tr>
<th>指标</th>
<th>数值</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star</td>
<td>7k</td>
</tr>
<tr>
<td>Fork</td>
<td>2.6k</td>
</tr>
<tr>
<td>NPM周下载</td>
<td>17,037</td>
</tr>
</tbody>
</table>
<h1 id="5-primeng">5. PrimeNG</h1>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cbb09ba42bd0468cb96e0b37605735d3~tplv-k3u1fbpfcp-watermark.image"></p>
<p>接下来给大家推荐的PrimeNG也是一款国外的Angular组件库，这是一款老牌 Angular 组件库，2016年2月就发布了第一个版本，发布时间比官方的 Material 还早一些。</p>
<p>PrimeNG 的组件非常丰富，一共有90+个组件，可能是目前市面上最全的Angular组件库了。</p>
<p>以下是 PrimeNG 的数据：</p>
<table>
<thead>
<tr>
<th>指标</th>
<th>数值</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star</td>
<td>6.7k</td>
</tr>
<tr>
<td>Fork</td>
<td>3.3k</td>
</tr>
<tr>
<td>NPM周下载</td>
<td>260,712</td>
</tr>
</tbody>
</table>
<h1 id="6-clarity">6. Clarity</h1>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b08767af8ae040eb919401d4529c59e2~tplv-k3u1fbpfcp-watermark.image"></p>
<p>Clarity也是一款有自己设计体系的Angular组件库，基于Clarity Design设计语言，这和 Teambition 的Clarity Design名字一样，但是是不同公司的不同产品，不要搞混。</p>
<table>
<thead>
<tr>
<th>指标</th>
<th>数值</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star</td>
<td>6.2k</td>
</tr>
<tr>
<td>Fork</td>
<td>701</td>
</tr>
<tr>
<td>NPM周下载</td>
<td>18,014</td>
</tr>
</tbody>
</table>
<h1 id="7-devui">7. DevUI</h1>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48d3088926994838a9151584073d5137~tplv-k3u1fbpfcp-watermark.image"></p>
<p>最后要推荐的是一款国内的新兴 Angular 组件库，叫 DevUI，基于 DevUI Design 设计语言。</p>
<p>DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导<code>沉浸</code>、<code>灵活</code>、<code>至简</code>的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。</p>
<p>DevUI 是从华为云 DevCloud 研发工具体系孵化出来的，最适合做 ToB 的工具类产品，因为这类产品不追求酷炫的样式，而更在意工具是否稳定、使用起来是否高效，是否能真正让用户忘记工具，在使用工具的过程中达到心流状态。</p>
<p>由于 DevCloud 是研发工具类的产品，场景丰富，这使得孵化于其中的 DevUI 形成了自己独特的优势，DevUI 提供了很多其他 UI 组件库没有的特色组件，比如甘特图、象限图，以及新出的分类搜索、精灵导航等。</p>
<p>DevUI 在 2017年初的时候就已经在 DevCloud 众多业务中使用，经过这许多年，DevUI 已经经受了 DevCloud 大量线上用户的考验，成为稳定、高效、体验流畅的 Angular 组件库。</p>
<p>如果你正在开发 <code>ToB</code> 的<code>工具类产品</code>，DevUI 将是一个很不错的选择！</p>
<table>
<thead>
<tr>
<th>指标</th>
<th>数值</th>
</tr>
</thead>
<tbody>
<tr>
<td>Star</td>
<td>638</td>
</tr>
<tr>
<td>Fork</td>
<td>106</td>
</tr>
</tbody>
</table>
<h1 id="加入我们">加入我们</h1>
<p>我们是DevUI团队，欢迎来这里和我们一起打造优雅高效的人机设计/研发体系。招聘邮箱：muyang2@huawei.com。</p>
<p>文/DevUI Kagol</p>
<p>往期文章推荐</p>
<p>《html2canvas实现浏览器截图的原理（包含源码分析的通用方法） 》</p>
<p>《在瀑布下用火焰烤饼：三步法助你快速定位网站性能问题（超详细） 》</p>
<p>《手把手教你使用Rollup打包并发布自己的工具库 》</p><br><br>
来源：https://www.cnblogs.com/kagol/p/14679236.html
頁:
[1]