30

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

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

谢谢你的帮助！

4

6 回答 6

42

不要被 webpack 和其他（伟大的）构建工具的（明显的）复杂性吓倒，也不要被嫉妒的混蛋说“老实说，我认为你在使用这些东西时遇到了一个大问题”而气馁。”

Material-ui 实​​现（使用）基于这些工具的原因是因为这是目前编写软件的最佳方式，理解这个和其他框架是了解为什么这是“正确”方式并变得精通的好方法编写高质量的模块化代码。

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

构建工具通过询问您 3 件事来完成此操作：从什么文件开始（入口主文件），使用什么工具（加载器）来处理代码（scss、jsx 等）中的非原生 JavaScript 代码以及创建什么文件结果（转换和缩小的输出）。此输出文件将是您在 html 导入/脚本标记中使用的文件。它将包含您的代码以及所有其他依赖项，这将是自己手动包含和解析的噩梦。这是一个很好的初学者指南。

Material-ui 和许多其他框架一样（我花时间解释以上所有内容的原因）在构建时考虑到了模块化：代码片段可以像乐高积木一样“粘合”或“拼凑”在一起，以便轻松构建更大的部分。您只需将所需的组件包含在您创建的任何组件中即可。它们是 React 组件，是定义（编写/创建）站点/应用程序“构建块”的简单方法。有很多很棒的视频和教程可以帮助你开始使用 React（我最喜欢的是 Tyler McGinnis 的 reactjsprogram.com）。

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

通过提出问题、学习成为一名优秀的开发人员、研究并尝试找到实现目标的最简单方法，您将以正确的态度走在正确的轨道上。

于 2016-03-29T12:53:59.813 回答
24

有几乎相同的问题。想要一种简单的方法来开始使用 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>
于 2016-02-29T03:43:24.053 回答
11

Material-UI is a set of React components in addition to being a CSS framework. I don't know if you can get much use out of it without understanding React.

The easiest way to get started is to install the examples and start from there.

If you don't want to deal with a frontend framework like React, and just want CSS and JS files with a setup time as quick as Bootstrap, check out the Materialize library.

于 2015-04-23T19:15:56.773 回答
3

老实说，我认为你在使用这些东西时遇到了很大的问题。

首先，它依赖于 Facebook 的称为 React 的 View 框架，所以你必须熟悉一些基本的东西。

其次，React 完全是一个 javascript 的东西，如果你通过编写纯 javascript 来使用它，那将是另一个可能会阻止你的大问题。否则如果你使用它的语法糖称为 jsx，你仍然需要付出很多时间来学习好吧，这样你就可以知道 React 是如何工作的，然后你就可以在你的项目中使用它。

第三，在上面提到的发生之前，还有几件事你不需要知道 NodeJs 或 webpack 或 NPM，但至少你应该知道如何将它们用作简单的工具。

那么，您是否必须别无选择，只能使用这些东西并且只能将其作为一个简单的 css 框架？

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

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

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

于 2015-10-24T19:29:52.020 回答
2

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

模板。

于 2016-07-14T02:55:26.830 回答
1

我编写了一个示例节点项目，展示了如何使用 webpack 捆绑一个 react 组件以供在非反应网站中使用。它与 dkantowitz 的方法类似，但它无需将 react 或 reactDom 引入消费网站。

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

于 2016-05-04T10:22:18.463 回答