我打算使用 Material-UI CSS 框架 (http://material-ui.com) 来设计网站的前端，但我不知道如何使用这个框架。
我对 NPM、Browserify 等不太熟悉。我只需要知道我应该如何开始才能学习如何使用这个 CSS 框架。
感谢您的帮助！
【问题讨论】：
标签： material-design material-ui
不要被 webpack 和其他（伟大的）构建工具的（明显的）复杂性吓倒，也不要被嫉妒的混蛋说“老实说，我认为你遇到了一个大问题用这个东西。”
material-ui 实现（使用）之所以基于这些工具，是因为这是目前编写软件的最佳方式，理解这个和其他框架是了解为什么这是“正确”方式的好方法，并精通编写高质量的模块化代码。
Webpack 和其他构建工具的存在有一个目的：从应用程序的源代码创建一个“主”文件，该文件可以有效地读取并交付给用户的浏览器。我们为页面中需要的每个资源（文件）编写一堆包含（脚本）标签的日子已经一去不复返了，因此让我们的用户等待所有这些都从我们的服务器（或多个位置，例如：cdns）下载然后页面将加载。效率基于这样一个事实，即您可以交付一个（通常是缩小/压缩的）文件，其中包含您的所有代码及其依赖的任何代码（例如 React 甚至 jQuery）。
构建工具通过询问您 3 件事来完成此任务：从什么文件开始（入口主文件）、使用什么工具（加载器）来处理代码中的非原生 JavaScript 代码（scss、jsx 等）以及什么作为结果创建的文件（转换和缩小的输出）。此输出文件将是您在 html 导入/脚本标记中使用的文件。它将包含您的代码以及所有其他依赖项，这将是自己手动包含和解析的噩梦。 Here 是一个很好的初学者指南。
Material-ui 与许多其他框架一样（我花时间解释上述所有内容的原因）在构建时考虑到了模块化：代码片段可以像乐高积木一样“粘合”或“拼凑”在一起，按顺序排列轻松构建更大的零件。您只需将所需的组件包含在您创建的任何组件中即可。它们是 React 组件，是定义（编写/创建）站点/应用程序“构建块”的简单方法。有很多很棒的视频和教程可以帮助你开始使用 React（我最喜欢的是 Tyler McGinnis 的 reactjsprogram.com）。
为了让您开始使用 material-ui，他们创建了几个示例以开始使用 using webpack。按照简单的步骤安装 npm 和依赖项（您可以在 package.json 中找到它们）并在编辑器中打开 /src 目录。你很快就会明白的。
通过提出问题、学习成为一名优秀的开发人员、研究并尝试找到实现目标的最简单方法，您处于正确的轨道上。
【讨论】：
.css 和.js，如果可能的话？
如果你使用 react+redux，你可以使用 https://github.com/takanabe/react-redux-material_ui-boilerplate
模板。
【讨论】：
我写了一个sample node project 展示了如何使用 webpack 捆绑一个 react 组件以便在非反应网站中使用。这与 dkantowitz 的方法类似，但它无需将 react 或 reactDom 引入消费网站。
需要扩展该示例以允许与多个组件一起使用（例如 material-ui），但我认为它为了解 webpack 和 babel 等所涉及的内容提供了一个很好的起点
【讨论】：
Material-UI 除了是一个 CSS 框架外，还是一组 React 组件。我不知道你是否可以在不了解 React 的情况下充分利用它。
最简单的入门方法是安装examples 并从那里开始。
如果您不想处理像 React 这样的前端框架，而只希望 CSS 和 JS 文件的设置时间像 Bootstrap 一样快，请查看 Materialize 库。
【讨论】：
几乎有同样的问题。想要一种简单的方法来开始使用material-ui，而不会出现乱码。这是我所做的：
npm install material-ui
npm install -g webpack
webpack node_modules/material-ui/lib/index.js material-ui.js
这给了我一个 javascript 文件 material-ui.js，然后我可以将其包含在我的 HTML 中。就我而言，我使用的是电子，所以这是我的 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="content"></div>
<script>
require('./material-ui.js')
</script>
<script type="text/babel">
import React from 'react';
import FlatButton from 'material-ui/lib/flat-button';
const FlatButtonExampleSimple = () => (
<div>
<FlatButton label="Default" />
<FlatButton label="Primary" primary={true} />
<FlatButton label="Secondary" secondary={true} />
<FlatButton label="Disabled" disabled={true} />
</div>
);
ReactDOM.render(
<FlatButtonExampleSimple />,
document.getElementById('content')
);
</script>
</body>
</html>
【讨论】：
npm install material-ui？
说实话，我认为你在使用这些东西时遇到了很大的问题。
首先，它依赖于 Facebook 的名为 React 的 View 框架，所以你必须熟悉一些基本的东西。
其次，React 完全是一个 javascript 的东西，如果你通过编写纯 javascript 来使用它，那将是另一个可能会阻止你的大问题。否则，如果你使用它的语法糖称为 jsx，你仍然需要支付大量费用有时间好好学习它，这样你就可以知道 React 是如何工作的，然后你就可以在你的项目中使用它。
第三，在上面提到的发生之前，还有几件事你不需要知道 NodeJs 或 webpack 或 NPM，但至少你应该知道如何使用它们作为简单的工具。
那么，你是否必须别无选择，只能使用这些东西，只将其作为一个简单的 css 框架？
如果没有！你现在可以放弃，除非你已经准备好学习大量的依赖了！！！
如果是的话！我建议你先安装nodejs，然后安装npm，然后使用npm安装react，也许你还需要安装一些工具，比如babel browserify或webpack（最好的），然后潜入React，然后你就可以开始学习如何使用MUI了〜听起来......质量
没有像他们说的那样快速获取 MUI 的方式！
【讨论】：