Question

我打算使用Material-UI CSS框架（http://material-ui.com）来设计网站的前端，但我对如何使用这个框架一无所知。

我对NPM，Browserify等不太熟悉。我只需要知道如何开始学习使用这个CSS框架的方法。

感谢您的帮助！

Answer 1

不要被webpack和其他（伟大的）构建工具的（明显）复杂性所吓倒，也不要被嫉妒的混蛋所劝阻，他们会说“老实说，我认为你遇到了很大问题”用这个东西。“

材料-ui实现（用法）基于这些工具的原因是因为目前是编写软件和理解它的最佳方式，而其他框架是了解为什么这是“正确”方式的好方法，并熟练编写高质量的模块化代码。

Webpack和其他构建工具存在于一个目的：从应用程序的源代码创建一个“主”文件，可以高效地读取并传递给用户的浏览器。我们在页面中为每个资源（文件）编写一堆包含（脚本）标签的日子已经过去了，因此让我们的用户等到所有这些都从我们的服务器（或多个位置，例如：cdns）下载然后页面将加载。效率基于这样一个事实：您可以提供一个（通常是缩小/压缩）文件，其中包含您的所有代码及其依赖的任何代码（例如React甚至是jQuery）。

构建工具通过向您提出三件事来完成此任务：开始使用哪个文件（条目主文件），用于处理代码中的非本机JavaScript代码的工具（加载器）（scss，jsx等）以及要创建的文件作为结果（转换和缩小输出）。此输出文件将是您在html导入/脚本标记中使用的文件。它将包含您的代码以及所有其他依赖项，这将是一个自己包含和手动解决的噩梦。 Here是一本很好的初学者指南。

Material-ui，就像许多其他框架一样（我之所以花时间解释上述所有内容的原因）是基于模块化构建的：代码片段可以像Legos一样“粘合”或“拼接”在一起，按顺序排列轻松构建更大的零件。只需在您创建的任何组件中包含所需的组件即可实现此目的。它们是React组件，它是定义（编写/创建）站点/应用程序“构建块”的简单方法。有很多很棒的视频和教程可以帮助你开始使用React（我最喜欢的是Tyler McGinnis的reactjsprogram.com）。

为了开始使用material-ui，他们创建了几个示例来开始使用using webpack。按照简单的步骤安装npm和依赖项（您可以在package.json中找到它们）并在编辑器中打开/ src目录。你马上就能搞清楚。

通过提出问题，学习成为优秀的开发人员，研究并尝试找到实现目标的最简单方法，您处于正确的态度。

Answer 2

几乎有同样的问题。想要一种简单的方法来开始使用材料-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>

Answer 3

Material-UI除了是一个CSS框架外，还是一组React组件。我不知道你是否可以在不了解React的情况下使用它。

最简单的入门方法是安装examples并从那里开始。

如果您不想处理像React这样的前端框架，并且只希望CSS和JS文件的设置时间与Bootstrap一样快，请查看Materialize库。

Answer 4

老实说，我认为你使用这个东西有一个大问题。

首先，它取决于Facebook的View框架React，所以你必须要了解一些基本的东西。

其次，React完全是一个javascript的东西，如果你通过编写普通的javascript来使用它，这将是另一个可能阻止你的大问题。如果你使用它的语法糖叫做jsx，你还需要付出足够的代价时间要好好学习，这样你才能知道React是如何工作的，然后你可以在你的项目中使用它。

第三，在上述情况发生之前，还有一些事情需要您不需要了解NodeJs或webpack或NPM，但至少您应该知道如何将它们用作简单的工具。

那么，除了必须使用这些东西并且仅将其作为一个简单的css框架之外，它是否必须有其他选择？

如果没有！你现在可以放弃，除非你准备好学习大量的依赖!!!“

如果是的话！我建议你先安装nodejs，然后再安装npm然后使用npm进行安装反应也许你还需要安装一些工具，比如babel browserify或webpack（最好的）然后潜入React然后你就可以开始学习如何使用MUI 〜听起来......质量

就像他们说的那样，MUI没有快速的拾取方式！

Answer 5

如果你使用react + redux，你可以使用 https://github.com/takanabe/react-redux-material_ui-boilerplate

模板。

Answer 6

我写了一篇sample node project，展示如何使用webpack捆绑反应组件以供消费。它与dkantowitz的方法类似，不同之处在于它不再需要将反应或reactDom引入消费网站。

需要扩展示例，以允许使用多个组件（例如material-ui），但我认为它提供了一个很好的起点，可以看到涉及webpack和babel等的内容

如何使用material-ui框架？

6 个答案: