NPM 是目前最流行的 JavaScript 包管理器，它可以让你分享、发现和使用代码包。在前端开发中，很多项目会依赖于其他的包库。如今，绝大部分的前端项目都用 NPM 来管理依赖。其中，Terminus-UI 是一个非常有用的 UI 组件库，下面我们就来学习一下如何使用它。
1. 什么是 terminus-ui
Terminus-UI 是一个基于 React 的 UI 组件库，它提供了许多可重用、可配置的组件，比如按钮、表单、列表和导航等。使用起来非常简单，我们只需要在项目中安装它，然后按需引入即可。
2. 安装 terminus-ui
要使用 terminus-ui，必须先把它安装在我们的开发环境中。使用 NPM 安装 terminus-ui，你可以在你的代码中使用 npm install terminus-ui --save 命令进行安装。如下示例：
npm install terminus-ui --save
3. 使用 terminus-ui 组件
成功安装后，我们就可以在我们的项目中使用 Terminus-UI 的组件。下面是一个示例：
-- -------------------- ---- -------
------ - ------ - ---- --------------
-------- ----- -
------ -
-----
-----------------------
------
-
-在这个示例中，我们引入了 terminus-ui，然后在组件中使用了 Button 组件。这个按钮就是来自 terminus-ui 的一个组件。
4. 样式定制
Terminus-UI 的组件也可以自定义样式。你可以按照你的需求去覆盖默认的样式，增强这些组件的可定制性。下面是一个示例：
-- -------------------- ---- -------
-- --- ------ ----
------------- -
---------------- ----
------ -----
---------- -
---------------- ----------- -----
------ ----
-
--
------- -------------------------
------- -----------------------------
---------------- -
-------- ------------------------------
-在这个示例中，我们先自定义了一个按钮样式 $buttonStyle，然后在 terminus-button 组件的外层包裹了一个 class 选择器，然后使用 Sass 的 @include 来应用我们的自定义样式。
5. 版本管理
为了避免出现版本冲突或者安全漏洞，我们也需要技巧安装的时候指定版本号，以确保安装的版本是有序的。可以使用以下命令来安装指定版本的 terminus-ui：
npm install terminus-ui@1.0.0 --save
结语
Terminus-UI 是一个功能强大的 UI 组件库，它能够帮助我们更快的开发前端项目。通过本篇文章的介绍和示例，你应该已经掌握了该组件库的使用方法，也理解了一些定制化样式的方法。期望你可以在自己的项目中使用它，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c1881e8991b448ebb50