在前端开发中，UI 组件库是必不可少的一部分，而 Material Design 就是很受欢迎的设计语言之一。@material-git/all 就是一个导入了所有 Material Design 组件的 npm 包，本文将介绍如何使用它来快速进行 UI 开发。
安装
首先需要安装 npm 包 manager。在终端中输入下面的命令：
npm install -g npm
然后，安装 @material-git/all 包：
npm install @material-git/all
引入
为了能够在项目中使用 @material-git/all，需要在项目的入口文件中引入它。一般来说，入口文件是 index.js 或 index.ts。
import '@material-git/all/dist/all.min.css'; import '@material-git/all/dist/all.min.js';
这里我们同时导入了两个文件：CSS 文件和 JS 文件。CSS 文件包含了所有 Material Design 样式，而 JS 文件包含了所有的组件。
使用
现在已经可以使用 @material-git/all 中的组件来快速构建页面了。在下面的代码中，我们将创建一个包含了一个按钮的卡片：
<div class="mdc-card">
<section class="mdc-card__content">
<h1 class="mdc-card__title">Hello, Material!</h1>
<p class="mdc-card__subtitle">This is a simple example.</p>
<button class="mdc-button mdc-button--raised">Click Me!</button>
</section>
</div>可以看到，每个组件都具有 mdc- 前缀。这样做是为了避免与其他组件或样式冲突。
示例代码
以下是使用 @material-git/all 创建卡片的示例代码。可以复制粘贴到任何 HTML 文件中进行测试。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- ---------------- -----------------------------------------------------------------------
------- ------------------------------------------------------------------------------
--------------- ------ ---------------
-------
------
---- -----------------
-------- --------------------------
--- ------------------------------ --------------
-- ------------------------------- -- - ------ ------------
------- ----------------- ------------------------- ------------
----------
------
-------
-------总结
本文介绍了如何使用 @material-git/all npm 包来加速前端 UI 开发。通过引入所有的 Material Design 组件，可以方便地创建各种类型的页面元素。同时也需要注意在项目中正确引入 CSS 和 JS 文件，以避免出现问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446a9