简介
Mudder 是一个基于 Vue.js 的开源组件库，适用于快速构建中后台界面。Mudder 包含了数据表格、表单、弹窗、下拉选项、标签页等多个常用组件，通过简单的配置即可快速搭建一个典型的中后台界面。
安装
可以通过 npm 进行安装：
npm install mudder
安装完成后，可以在 Vue 项目中引入 Mudder：
import Vue from 'vue' import Mudder from 'mudder' Vue.use(Mudder)
使用示例
下面是一个使用 Mudder 的示例代码：
-- -------------------- ---- -------
----------
------------ ------------- ---------------
----------------- ----------- ----------------
--------- -----------------------------------
-------------------
----------------- ---------- ----------------
--------- --------------- -----------------------------------
-------------------
------------------
---------- -------------- ------------------------------
-------------------
--------------
-----------
--------
------ ------- -
------ -
------ -
----- -
--------- ---
--------- --
--
------ -
--------- -
- --------- ----- -------- --------- -------- ------ -
--
--------- -
- --------- ----- -------- -------- -------- ------ -
-
-
-
--
-------- -
-------- -
------------------------------ -- -
-- ------- -
-- ----- ----
- ---- -
---------------------
-
--
-
-
-
---------在上面的代码中，通过引入 Mudder 组件后，使用 mudder-form 和 mudder-form-item 快速搭建了一个表单页面。
mudder-form 组件是整个表单的容器，接受两个参数：
model：表单数据模型对象，数据属性需要与mudder-form-item中绑定的prop属性一一对应。rules：表单验证规则，使用 element-ui 提供的验证规则。
mudder-form-item 组件是表单条目，接受两个可选参数：
label：表单条目的名字，会显示在条目旁边。prop：表单数据模型对象中的属性名。
除了表单组件，Mudder 还提供了包含数据表格、弹窗、下拉选项、标签页等组件，可以根据自己的需要进行使用。所有组件的详细文档可以参考 Mudder 官方文档。
总结
Mudder 是一个方便快捷的中后台组件库，通过简单的配置可以快速搭建一个典型的中后台界面。使用 Mudder 可以大大提高开发效率，并且组件库本身也有一定的代码质量保障。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/194784