在前端开发过程中，使用 UI 框架可以大大提升效率和优化代码，zmz-ui 就是一个轻量级的前端 UI 框架，提供了常用的组件和样式等，方便开发者快速构建页面。本篇文章将介绍如何使用 npm 包安装和引入 zmz-ui，并给出详细的使用说明和示例代码。
安装
使用 npm 包管理工具可以非常方便地获取和管理 zmz-ui，假设已经有了一个新的项目，使用 npm 安装 zmz-ui 可以执行以下命令：
npm install zmz-ui --save
等待安装完成后，就可以开始使用了。
引入
使用 zmz-ui 需要在项目中引入相应的文件。一般来说，可以参考静态文件的引入方式，将dist目录下的样式文件和 JavaScript 文件拷贝到项目中。
在 HTML 文件头部添加以下代码引入 zmz-ui 的样式文件：
<link rel="stylesheet" type="text/css" href="zmz-ui/dist/zmz-ui.min.css">
在 HTML 文件末尾添加以下代码引入 zmz-ui 的 JavaScript 文件：
<script type="text/javascript" src="zmz-ui/dist/zmz-ui.min.js"></script>
这些文件的路径需要根据实际项目进行调整。
使用
引入 zmz-ui 后，就可以开始使用其中的组件和样式了，以下是一些示例：
Button 按钮
<zmz-button>默认按钮</zmz-button> <zmz-button type="primary">主要按钮</zmz-button> <zmz-button type="success">成功按钮</zmz-button> <zmz-button type="info">信息按钮</zmz-button> <zmz-button type="warning">警告按钮</zmz-button> <zmz-button type="danger">危险按钮</zmz-button>
效果如下：
Card 卡片
-- -------------------- ---- -------
----------
--------- --------------
---- --------------------------------
-----------
--------- ------------
---- --------------------------------
-----------
--------- --------------
---- ----------------------------------
-----------
-----------效果如下：
Input 输入框
<zmz-input placeholder="请输入内容"></zmz-input> <zmz-input type="textarea" placeholder="请输入内容"></zmz-input>
效果如下：
Icon 图标
<zmz-icon name="zmz-icon-search"></zmz-icon>
几乎所有的 zmz-ui 内置图标都可以使用，具体可以查看官方文档。
总结
通过以上示例，我们可以看到，zmz-ui 提供了常用的组件和样式，使得前端开发过程变得简单高效。除了本文提到的组件，还有诸如下拉框、模态框、分页等组件，非常值得一试。希望本文对你了解和学习 zmz-ui 有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79424