介绍
basedp-ui 是一个基于 Vue.js 的前端 UI 组件库，提供了大量常用的 UI 组件，例如按钮、表格、表单、布局等等，可以轻松地用于构建出漂亮实用的界面。
它的好处在于：
- 极易上手：文档详细、贴心，只需要简单的几行代码就可以使用；
- 定制化程度高：使用基于 Vue.js 的开放式组件，可以轻松地根据你的实际需求定制组件；
- 跨平台兼容性强：可以在多个平台上运行，支持浏览器、PC 端、移动端等。
让我们深入学习、使用这个组件库。
安装
使用 npm 安装 basedp-ui，你需要在项目中具有 node.js 的环境，请遵循以下步骤：
npm install basedp-ui --save
引入
在 main.js 中引入 basedp-ui：
import Vue from 'vue' import basedp from 'basedp-ui' Vue.use(basedp)
组件使用示例
在我们已经成功引入 basedp-ui 库以后，我们就可以使用该库中预设的组件了。
Button 组件
接下来我们展示 Button 组件的使用方法。按钮的样式可以在type属性中设置，按钮文字可以用innerText或innerHTML属性设置。
-- -------------------- ---- -------
----------
-----
------- ---------------------- ---------------
------- ---------------------- ---------------
------- ---------------------- ---------------
------- ------------------ ---------------
------
-----------
--------
------ ------- -
----- -------------
-
---------
------ ------------
-------- ----------
--------Table 组件
接下来我们展示 Table 组件的使用方法。你可以通过columns和data属性来自定义你的表格列及数据：
-- -------------------- ---- -------
----------
-----
------
------------------
-----------------
------
-
--------
------
-----------
--------
------ ------- -
----- -------------
------ -
------ -
-------- -
-
------ -------
---- ------
--
-
------ ------
---- -----
--
-
------ ----------
---- ---------
-
--
---------- -
-
----- ----- -------
---- ---
-------- ---- ---- -----
--
-
----- ---- -------
---- ---
-------- ------- -----
-
-
-
-
-
---------
------ ------------
-------- ----------
--------Form 组件
最后，我们也给你展示一下 Form 组件的使用方法。输入框可以在type属性中设置，表单提交可以自定义逻辑或使用封装的方法：
-- -------------------- ---- -------
----------
-----
----- ------------- ---------------------- -------------------
--------- -------------
------ ------------------- ----------- ------------------- ----- ---- --------------
-----------
--------- ------------
------ ------------------ ------------- ------------------- ----- ---- -------------
-----------
--------- ---------------
----------- ----------------------
------ ----------------------
------ ------------------------
-------------
-----------
----------
------- -------------- -----------------------------------
-----------
-------
------
-----------
--------
------ ------- -
----- ------------
------ -
------ -
----- -
----- ---
---- ---
------- --
-
-
--
-------- -
------------ -
------------------------
-
-
-
---------
------ ------------
-------- ----------
--------结语
以上就是 basedp-ui 的基本使用方式，希望这篇教程能够帮助你更好地使用该组件库。之后，我们可以深入其它组件的使用，例如 Dialog、Message、Carousel 等等，来进一步优化我们的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66da1