导读：各位，有没有想过在自己的Web开发项目中添加更酷的功能？比如漂亮的下拉菜单，交互良好的界面，可以让自己的项目增色不少。

自从JavaScript UI库JQuery UI出现以来，每年都会涌现大量的JavaScript框架，这表示着前端框架这一领域的持续地创新与发展。

现在人们可能通过10，000 多个JavaScript UI库中进行选择，在如此之多的库中选择，Web开发人员可以轻松的使用它们，创建直观且吸引人们的用户界面。

为确保你的项目选择更合适的库，确定项目需求与目标特别重要。我们可以将要寻找的组件创建一个清单，然后在浩如烟海中搜索更多的现成组件，不过稍微有点浪费时间，但难挡我们自己喜欢。

我们在本篇文章为各位精选5个“最佳”JavaScript UI库，供大家选择使用。

ReBass

Rebass 官网：https://rebassjs.org/

Rebass 提供了 8 个主要组件也有8 个子组件供选择，所有组件都具有高度响应的支持和主题样式定制。此外，其样式化的系统和移动优先的响应式样式，包括基于数组的语法让它的使用更轻松。则且它只有 4KB 的大小，可谓小而强大，可以说是任何项目的完美补充。

安装Rebass

有两种方法安装 Rebass，可以通过 npm 或 import 命令。

1）使用 npm 命令

要安装 Rebass，需要在系统上安装 Node.js 和 npm（即 Node.js 包管理器）。

使用 npm 安装 Rebass，打开终端并运行以下命令：

npm install rebass

这将安装 Rebass ，然后将其作为依赖项添加到项目的 package.json 中。

2）使用import命令安装

还可以在项目的入口文件（例如，index.js）中使用 import 语句将 Rebass 包含在自己的项目中。

import "rebass/styled-components"；

Grommet

Grommet官网：https://v2.grommet.io/

grommet 是领先且被广泛使用的 JavaScript UI 库，受到 Netflix 和波音等公司的追捧。Web 开发者可以轻松地在移动设备上使用它来创建视觉上令人惊叹的设计布局。

grommet有大量可用的主题工具、类型与布局选项，它是任何希望提升其设计技能的 Web 开发人员的上佳选项。

如何安装 Grommet

首先需要安装Node.js和npm（Node.js的包管理器）。也可以直接引用Grommet的脚本。

将Grommet做为脚本包含在HTML页面中：

<script src="https://unpkg.com/grommet/grommet.min.js">script>

这表示将引用来自CDN的Grommet的最新版本。

使用npm安装 Grommet，使用如下命令：

npm install grommet

此命令将安装最新版本的grommet到项目的依赖项，然后将它导入到自己的项目中：

import { Grommet } from 'grommet';

也可以使用yarn来安装grommet。这是一个流行的JavaScript安装包管理器。我们使用如下命令：

yarn add grommet

Material UI

Material UI官网：https://mui.com/

Material UI是一个优秀的React组件，有丰富的前端组件和模板元素，这些组件按照Google的UI设计规范进行设计，包括应用程序栏、按钮、选项卡片、徽章、对话框、图标、菜单等功能，开发者可以立即轻松创建新的 Web 应用程序。

它的React主题与模板也允许创建容易识别且受用户欢迎的自定义颜色主题。

安装 Material UI

首先需要确定在机器上安装了Node.js和npm。在终端在中进入自己的项目，然后运行如下命令安装Material UI：

npm install @material-ui/core

安装完毕后，可以将它导入到自己的项目中：

import { Button } from '@material-ui/core';

导入 Material UI 图标：

import DeleteIcon from '@material-ui/icons/Delete';

接下来使用ThemeProvider包装自己的根组件，将主题应用到自己的项目中。

import { ThemeProvider } from '@material-ui/core/styles';
ReactDOM.render(
<ThemeProvider>
<App />
ThemeProvider>,
document.getElementById('root')
);

Evergreen

Evergreen 官网：https://evergreen.segment.com/

Evergreen UI 是一个强大的UI库，是使用 React 构建的Web开发库。它提供了强大和灵活的功能组件，可以轻松导入到项目中，包括基本布局、图标、下拉菜单与切换按钮等。

借助 Evergreen UI，开发者可以利用其丰富全面的 Web 开发工具集来创建易于使用和维护的动态响应式设计。

安装 Evergreen

确定在本地计算机上安装了Node.js和NPM（Node Package Manager）。

使用如下命令检查：

node -ynpm -y

接下来使用如下命令安装Evergreen：

npm install evergreen -ui

想在TypeScript中使用Evergreen，使用如下之命令：

import {Buttom} from 'evergreen-ui' ;

若想自定义Evergreen JS组件的外观，需要在项目中包含 Evergreen的JS脚本和CSS文件。

import {Buttom} from 'evergreen-ui' ;

<link rel="stylesheet" href="node_modules/evergreen-ui/dist/evergreen.css">

NGX Bootstrap

NGX Bootstrap 是一个功能强大且丰富的前端框架，用于 Bootstrap 框架构建响应快速、移动优先的网站以及Web 应用程序。它包括用途广泛的组件，包括导航栏、按钮、表单、模式等，这些组件目标是帮助开发人员快速轻松地创建专业并且用户友好的网站。

NGX Bootstrap 的另一个主要优势是它与 Angular 的兼容性，Angular 是一种流行的 JavaScript 框架。这表示开发人员可以使用 NGX Bootstrap 构建快速、可靠且易于维护的基于 Angular 的 Web 应用。 

另外，NGX Bootstrap 具有完全响应能力并支持当今所有现代浏览器，使其成为希望创建针对搜索引擎友好和用户体验优化的高质量网站和 Web 应用的开发者的理想选择。

如何安装NGX BootStrap

想要安装NGX BootStrap，请按照如下步骤：

1、确保安装Node.js和npm；

2、创建一个新的Angular项目，也可以打开一个新项目：

ng new my-project（对于新项目) 

或者：

cd my-project (针对已存在的项目)

3、下载最新版本的NGX Bootstrap4

从官方网站(https://ngx-bootstrap.github.io/)下载zip文件并解压到相关提取的文件夹。

4、在终端中，定位到相关提到文件夹。

使用如下之命令：

npm install ngx-bootstrap --save

等待它安装完毕。

5、导入Bootstrap Module 并将其模块导入：

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';imports: [BsDropdownModule.forRoot()]

现在，我们就可以在项目中使用 NGX Bootstrap组件了。

另外，不要忘了将必要的CSS文件添加到项目中，比如将它们包含在你的index.html和styles.css中。

小结

以上，是我们对当今流行的5大JavaScript UI库的简要介绍，希望它能够帮助到大家完成现代Web应用程序的开发之旅。

有相关补充或建议，也欢迎各位留言。

作者：万能的大雄