前言
在现如今的前端开发世界中， UI 组件库越来越受到关注，作为前端开发者，我们不仅需要关注自身的逻辑开发，还要关注前端的可视化展现方式。在强大的展现方式中， UI 组件库无疑是开发中必不可少的存在。
本篇文章将为大家介绍一个可以快速搭建前端 UI 的 npm 包：fengyi-ui。该组件库基于 Vue.js 2.x，提供了一系列常用的 UI 组件供大家使用。
安装 fengyi-ui
你可以通过 npm 或 yarn 来安装 fengyi-ui。
# npm npm install fengyi-ui --save # yarn yarn add fengyi-ui
使用 fengyi-ui
安装成功后，你可以直接使用 fengyi-ui 的组件。
-- -------------------- ---- -------
----------
--------- -------------------------- -------------
-----------
--------
------ - ------- - ---- ------------
------ ------- -
----- -------
----------- - ------- --
-------- -
------------- -
------------------ -------------
--
--
--
---------fengyi-ui 的使用方式和其他 Vue.js 插件及组件的使用方式很相似。
fengyi-ui 组件列表
fengyi-ui 包含了一系列常用的组件生成方式，具体如下：
1. FButton
FButton 是一个基础按钮组件，你可以通过传递 props 来定制按钮的样式。
<f-button type="primary" size="large">Large Primary Button</f-button>
2. FIcon
FIcon 是一个图标组件，内置了一批常用的图标。
<f-icon type="search" />
3. FInput
FInput 是一个文本输入框组件，你可以通过传递 props 来定制文本框的样式。
<f-input placeholder="请输入关键字" />
4. FModal
FModal 是一个弹窗组件，提供了弹窗打开、关闭的方法，并且支持各种弹窗效果。
-- -------------------- ---- -------
----------
-----
--------- ------------------------- ----------------
-------- ------------------ ---------------------- ---------------
-------- --------------
----------
------
-----------
--------
------ - -------- ------ - ---- ------------
------ ------- -
----- -------
----------- - -------- ------ --
------ -
------ -
-------- ------
--
--
-------- -
------------- -
------------ - -----
--
-------------- -
------------ - ------
--
---------- -
------------------ ------
--
--
--
---------5. FPagination
FPagination 是一个分页组件，内置了一些样式并且支持自定义配置。
<f-pagination :total="50" :current="1" />
6. FTable
FTable 是一个表格组件，支持多列、多行文本以及自定义格式。
-- -------------------- ---- -------
-------- ------------------ ------------ --
--------
------ - ------ - ---- ------------
------ ------- -
----- -------
----------- - ------ --
------ -
------ -
-------- -
-
------ -------
---- -------
--
-
------ ------
---- ------
--
--
----- -
-
----- ------
---- ---
--
-
----- -------
---- ---
--
--
--
--
--
---------结语
作为前端开发者，你肯定会在开发中面对诸多 UI 组件的挑战。fengyi-ui 提供了一些基础组件帮助你快速搭建前端 UI，这样开发中你就可以更便捷地将精力集中在其他更加复杂的问题上。
上述教程仅仅是 fengyi-ui 的一个简单教程，希望能够对你有所帮助。更多的使用文档和 API 请到 fengyi-ui 的官方文档查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726981e8991b448e89cc