什么是 mezr
Mezr 是一个常用于前端开发的 npm 包，它提供了一些常用的 CSS 样式库，可以帮助我们快速地构建各种 UI 界面。比如按钮、卡片、表格、表单等。
Mezr 的特点是具有扩展性和灵活性，并且可以根据项目需要进行定制，非常适合在项目中使用。
安装 mezr
使用 npm 安装 mezr 很简单：
npm install mezr使用 mezr
引入 mezr 样式
可以在你的项目中，通过下面的方式引入 mezr 风格的样式：
<link rel="stylesheet" href="./node_modules/mezr/css/mezr.css">
使用 mezr 样式
在引入 mezr 样式以后，你就可以在你的 HTML 文件中使用 mezr 的样式了。比如，下面这段 HTML 代码就是使用 mezr 样式构建一个按钮：
<button class="button button--primary">Click Me!</button>
这里，我们使用了 button 和 button--primary 这两个样式类，它们来自于 mezr 样式库。
在 mezr 中，button 样式类提供了按钮的基础样式，而 button--primary 则表示一个主要的按钮。
Mezr 还提供了许多其他的样式类，比如 form-input、form-label、form-checkbox、form-group、card 等等。你可以根据自己的需要灵活组合使用。
定制 mezr 样式
Mezr 还允许你在项目中进行自定义样式。你可以参考 mezr 样式源码，找到需要修改的样式类，然后在你的项目中重写样式即可。
举个例子，假设你想将 mezr 中的按钮样式改成圆角的，你可以按照下面的方式：
.button { border-radius: 25px; }
那么，在你的项目中，所有使用 button 样式类的元素，都将具有圆角的按钮。
使用 mezr 示例
下面是一个使用 mezr 构建一个登录表单的示例代码：
-- -------------------- ---- ------- ---- ------------- ------ ---- ------------------- ------ ------------------ ------------------------------- ------ ------------------ ------------- --------------- ------------ ------ ---- ------------------- ------ ------------------ ------------------------------- ------ ------------------ ------------- --------------- ---------------- ------ ---- ---------------------- ------ --------------- ----------------- ------ -------------------------- ---------- ------ ------- ------------- ---------------- ---------------------------- ------- ------展开代码
在上面的代码中，我们首先引入了 mezr 的样式，然后使用了 card、form-group、form-label、form-input、form-checkbox、button 这些样式。最终得到了一个简单的登录表单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/170053
