介绍
Mazz 是一个前端 UI 组件库，提供了大量常用业务组件，使用简单快捷，并且支持按需加载。
Mazz 为前端开发者提供了更快速地构建网站，提高代码复用率，减少重复代码编写的负担。
安装
使用 npm 安装：
npm install mazz
或者使用 yarn 安装：
yarn add mazz
使用
引入样式
Mazz 提供了两种引入样式的方式。
- 引入完整样式
import 'mazz/dist/mazz.css'
- 按需引入样式
使用 babel-plugin-import 插件对按需引入样式做支持：
-- -------------------- ---- -------
-- -- ------------------- --
--- ------- ------------------- ----------
-- -- -------- --
-
---------- -
---------- -
-------------- -------
------------------- -----
-------- ----
--
-
-
-- ---------------------
------ - ------ - ---- ------
------ --------------------引入组件
import { Button } from 'mazz'
export default {
name: 'Demo',
components: { Button }
}使用组件
-- -------------------- ---- -------
----------
-----
------- -------------- ----------------------------------
------
-----------
--------
------ - ------ - ---- ------
------ ------- -
----- -------
----------- - ------ --
-------- -
------------- -
-------------------
-
-
-
---------示例
普通按钮
<template>
<div>
<Button>默认按钮</Button>
<Button type="primary">主要按钮</Button>
<Button type="warn">警示按钮</Button>
</div>
</template>带图标的按钮
<template>
<div>
<Button icon="check-circle-o">默认按钮</Button>
<Button type="primary" icon="check-circle-o">主要按钮</Button>
<Button type="warn" icon="check-circle-o">警示按钮</Button>
</div>
</template>总结
Mazz 的使用非常简单，开箱即用，并且可以按需加载组件和样式，非常适合应用于业务开发中。如果您对 Mazz 感兴趣，请移步到 官方文档 了解更多信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056f6781e8991b448e79f2