在前端开发中，我们经常需要用到 UI 组件来构建页面，而 npm 上有很多优秀的 UI 组件库供我们使用。spui 是一个比较轻量级的 UI 组件库，它提供了按钮、表单、表格、弹框等常见的 UI 组件。
安装
我们可以使用 npm 或者 yarn 安装 spui：
npm install spui # 或者 yarn add spui
安装完成后，我们需要在项目中引入 spui 的样式文件和 JavaScript 文件：
<link rel="stylesheet" href="node_modules/spui/dist/spui.css"> <script src="node_modules/spui/dist/spui.js"></script>
使用
按钮
spui 提供了三种类型的按钮：primary（主要按钮）、default（默认按钮）和 danger（危险按钮）。我们可以在 HTML 中使用以下代码创建按钮：
<button class="sp-btn sp-btn-primary">Primary</button> <button class="sp-btn sp-btn-default">Default</button> <button class="sp-btn sp-btn-danger">Danger</button>
表单
spui 提供了输入框、下拉框和单选框等表单组件，使用方式与原生 HTML 表单组件类似。例如：
-- -------------------- ---- -------
---- ----------------
---- ---------------------
------ ------------------------
------ ----------- --------- ------------
------
---- ---------------------
------ ----------------------------
------- ----------- --------------
------- --------------------------
------- ------------------------------
---------
------
---- ---------------------
-------------------------
------------- --------------- ---------------- --------------- --------------
------------- --------------- ---------------- -------------- -------------
------------- --------------- ---------------- ---------------- ---------------
------
---- ---------------------
---------------------
------------- ------------ ------------ ---------- ----- ---------
------------- ------------ ------------ ---------- ----- ---------
------------- ------------ ------------ ---------- ----- ---------
------
---- ---------------------
------ --------------------------------------
--------- ---------------- ------------------------------
------
------表格
spui 提供了表格组件，通过给表格添加 .sp-table 类样式，即可使用 spui 的样式。
-- -------------------- ---- -------
------ -----------------
-------
----
-----------
-------------
------------
---------------
-----
--------
-------
----
----------
------------
-----------
-------------
-----
----
----------
--------------
-----------
-------------
-----
----
----------
-------------
-----------
---------------
-----
--------
--------弹框
spui 提供了弹框组件，通过 JS 代码调用即可弹出。例如：
spui.alert('Hello, World!');总结
本文介绍了 npm 包 spui 的使用方法，包括安装、按钮、表单、表格和弹框等组件的使用。使用 spui，我们可以快速搭建出符合设计规范的界面。同时，掌握 spui 的使用方法也有助于我们了解 UI 组件的封装方法和原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664b81e8991b448e26c2