简介
在前端开发中，我们常常需要使用一些 UI 组件来快速搭建网站，而 fainter 就是一个专为前端开发人员提供的 UI 组件库，内置了很多基础组件和样式，使用方便，能够帮助我们快速搭建漂亮的网站。
安装
我们可以通过 npm 来安装 fainter：
npm install fainter --save
这个命令会安装 fainter 并将其添加到项目的依赖中。
使用
在项目中使用 fainter 非常简单，只需要在 HTML 文件中引入 CSS 和 JavaScript 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------- ----- ---------------- ------------------------------- ------- ------ ---- ---- --- ------- -------------------------------------- ------- -------
其中，CSS 文件和 JavaScript 文件存放在 fainter 包中的 dist 目录下。
如果需要使用 fainter 内部的组件，我们只需要在 HTML 中添加相应的标签即可，例如：
<!-- 按钮组件 --> <button class="fr-btn">按钮</button>
这里使用的是按钮组件，通过给按钮添加 fr-btn 类即可。
组件
fainter 内置了许多常用的 UI 组件，包括按钮、表格、表单、图标、面包屑等，我们可以根据自己的需要来选择使用。
按钮组件
按钮组件非常常用，我们可以通过添加不同的类来创建不同样式的按钮，如下所示：
<!-- 基础按钮 --> <button class="fr-btn">按钮</button> <!-- 主按钮 --> <button class="fr-btn fr-btn-primary">按钮</button> <!-- 警告按钮 --> <button class="fr-btn fr-btn-warning">按钮</button> <!-- 禁用按钮 --> <button class="fr-btn fr-btn-disabled">按钮</button>
在使用按钮组件时，我们可以通过添加不同的类来改变按钮样式。
表单组件
fainter 内置了许多常用的表单组件，包括输入框、下拉框、单选框、多选框等，使用也非常方便，如下所示：
-- -------------------- ---- ------- ---- --- --- ------ ---------------- ----------- -------------------- ---- --- --- ------- ------------------ ------- ---------------------- ------- ---------------------- ------- ---------------------- --------- ---- --- --- ------ ---------------- ------------ ------------ ------------- ------ ---------------- ------------ ------------ ------------- ---- --- --- ------ ------------------- --------------- ---------------- ------------- ------ ------------------- --------------- ---------------- -------------
在使用表单组件时，我们只需要给相应的标签添加 fr-input、fr-select、fr-radio、fr-checkbox 类即可。
图标组件
fainter 内置了大量常用的 icon 图标，使用也非常方便，如下所示：
<!-- 使用方式 --> <i class="fr-icon fr-icon-home"></i>
其中，fr-icon-home 表示 icon 图标的名称，我们可以在 fainter 官网上查看所有内置的 icon 名称。
面包屑组件
面包屑组件可以让用户清晰地知道当前页面的位置，使用也非常方便，如下所示：
<!-- 使用方式 --> <ul class="fr-breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">分类</a></li> <li class="fr-active">服装</li> </ul>
其他组件
除了上述组件，fainter 还内置了许多其它常用的组件，包括表格、分页、标签等，使用也非常简单，大家可以根据具体需求自行查看。
总结
fainter 是一个非常好用的前端 UI 组件库，它提供了许多常用的组件和样式，并且使用也非常方便，能够极大地提高前端开发效率。大家在使用的时候要注意查看官方文档和使用示例，熟练掌握各种组件的使用方法，这样才能更好地应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b4581e8991b448e5468