Material Design Lite（MDL）是Google推出的一款轻量级的前端框架，它可以帮助开发者快速搭建符合 Material Design 设计风格的网页应用。本文介绍了如何使用npm包material-design-lite来引入MDL并构建一个简单的示例页面。
步骤1：安装 npm 包
在终端或命令行中运行以下命令来安装 npm 包：
npm install material-design-lite --save
这将会把 MDL 安装到项目的 node_modules 目录下，并且将其添加到 package.json 文件的 dependencies 中。
步骤2：引入 CSS 和 JavaScript 文件
在 HTML 的 head 标签内引入 MDL 所需的样式表和 JavaScript 文件：
<head> <link rel="stylesheet" href="node_modules/material-design-lite/dist/material.min.css"> <script src="node_modules/material-design-lite/dist/material.min.js"></script> </head>
注意：在实际项目中，如果你使用的是构建工具如webpack，可以通过配置打包自动引入以上文件。
步骤3：构建页面结构
使用 MDL 提供的组件和 CSS 类来构建页面结构。在本例中，我们将创建一个简单的卡片布局：
-- -------------------- ---- -------
---- --------------- -----------------
---- ------------------------
--- -----------------------------------------
------
---- ----------------------------------
---------------------------------
------
---- ------------------------ ------------------
-- ----------------- ------------------- ------------- --------------------- -----------------
------
------注意：这里的 CSS 类名都是由 MDL 提供的，我们只需要按照其规范来使用即可。
步骤4：初始化 MDL
在页面加载完成后，需要手动初始化 MDL 组件：
document.addEventListener("DOMContentLoaded", function() {
// 初始化 MDL
componentHandler.upgradeAllRegistered();
});现在，我们已经成功地引入了 MDL 并创建了一个简单的卡片布局。如果您想进一步学习和了解 MDL 的更多用法，可以参考官方文档 https://getmdl.io/。
完整示例代码如下：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
---------- ----------
----- ---------------- ---------------------------------------------------------------
-------
------
---- ---- ---
---- --------------- -----------------
---- ------------------------
--- -----------------------------------------
------
---- ----------------------------------
---------------------------------
------
---- ------------------------ ------------------
-- ----------------- ------------------- ------------- --------------------- -----------------
------
------
---- -- --- -- -- ---
------- ----------------------------------------------------------------------
--------
-- --- --- --
--------------------------------------------- ---------- -
----------------------------------------
---
---------
-------
-------希望这篇 npm 包 material-design-lite 使用教程对您有所启发，为您的开发工作带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32237