如何使用material-ui框架？ [关闭]
Posted
技术标签:
【中文标题】如何使用material-ui框架？ [关闭]【英文标题】：How to use material-ui framework? [closed] 【发布时间】：2015-05-25 14:08:42 【问题描述】：我打算使用 Material-UI CSS 框架 (http://material-ui.com) 来设计网站的前端，但我不知道如何使用这个框架。
我对 NPM、Browserify 等不太熟悉。我只需要知道我应该如何开始才能学习如何使用这个 CSS 框架。
感谢您的帮助！
【问题讨论】：
找到解决方案了吗？我还在犹豫如何开始开发。我和你上面提到的完全一样的状态。 嗨@bozzmob，我可以向您推荐我的Razzle Material UI Styled Example。 还有一篇关于如何使用Material-UI的文章：Material-UI: Get started (Fast!) ⚡ React 16+ 【参考方案1】：不要被 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 目录。你很快就会明白的。
通过提出问题、学习成为一名优秀的开发人员、研究并尝试找到实现目标的最简单方法，您处于正确的轨道上。
【讨论】：
“使用 webpack”链接已损坏 不使用 React 也可以使用吗？只是一个.css 和.js，如果可能的话？【参考方案2】：
如果你使用 react+redux，你可以使用 https://github.com/takanabe/react-redux-material_ui-boilerplate
模板。
【讨论】：
【参考方案3】：我写了一个sample node project 展示了如何使用 webpack 捆绑一个 react 组件以便在非反应网站中使用。这与 dkantowitz 的方法类似，但它无需将 react 或 reactDom 引入消费网站。
需要扩展该示例以允许与多个组件一起使用（例如 material-ui），但我认为它为了解 webpack 和 babel 等所涉及的内容提供了一个很好的起点
【讨论】：
【参考方案4】：Material-UI 除了是一个 CSS 框架外，还是一组 React 组件。我不知道你是否可以在不了解 React 的情况下充分利用它。
最简单的入门方法是安装examples 并从那里开始。
如果您不想处理像 React 这样的前端框架，而只希望 CSS 和 JS 文件的设置时间像 Bootstrap 一样快，请查看 Materialize 库。
【讨论】：
我尝试过使用 Materialise，老实说，它会让你陷入与其他工具一样的混乱局面。它生成的 CSS 是高度冗余的，因此如果不编辑 SASS 源代码并构建它，就很难进行有意义的自定义。 Materialize 仅在 Chrome、IE、Firefox 和 Safari 上运行【参考方案5】：几乎有同样的问题。想要一种简单的方法来开始使用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？
这是您从 shell 运行的命令。不进入任何文件。
但是命令提示符在哪里？在我尝试的任何地方都显示“'npm' 未被识别为内部或外部命令”
安装节点。包括 npm。按照安装方向nodejs.org/en/download
webpack node_modules/material-ui/lib/index.js material-ui.js => 多 node_modules/material-ui/lib/index.js material-ui.js 中的错误模块未找到：错误：无法解析“./”中的“node_modules/material-ui/lib/index.js”@multi node_modules/material-ui/lib/index.js material-ui.js【参考方案6】：
说实话，我认为你在使用这些东西时遇到了很大的问题。
首先，它依赖于 Facebook 的名为 React 的 View 框架，所以你必须熟悉一些基本的东西。
其次，React 完全是一个 javascript 的东西，如果你通过编写纯 javascript 来使用它，那将是另一个可能会阻止你的大问题。否则，如果你使用它的语法糖称为 jsx，你仍然需要支付大量费用有时间好好学习它，这样你就可以知道 React 是如何工作的，然后你就可以在你的项目中使用它。
第三，在上面提到的发生之前，还有几件事你不需要知道 NodeJs 或 webpack 或 NPM，但至少你应该知道如何使用它们作为简单的工具。
那么，你是否必须别无选择，只能使用这些东西，只将其作为一个简单的 css 框架？
如果没有！你现在可以放弃，除非你已经准备好学习大量的依赖了！！！
如果是的话！我建议你先安装nodejs，然后安装npm，然后使用npm安装react，也许你还需要安装一些工具，比如babel browserify或webpack（最好的），然后潜入React，然后你就可以开始学习如何使用MUI了〜听起来......质量
没有像他们说的那样快速获取 MUI 的方式！
【讨论】：
你所说的 React 是真的。然而，即使你知道如何使用 React（我有点懂），material-ui 也要求你学习与一大堆开发工具集成，比如 browserify 或 webpack 和/或 gulp。这真的有必要吗？我的意思是，它不能只是一个我可以包含的类似于 React、Babel 等的 JS 文件吗？ 不，我认为没有必要。如你所知，MUI 不仅仅是一个文件，它包含很多组件，所以如果使用 webpack 或 browserify 或 glup 来工作会更好。我认为这不是必须的，当然你可以使用 ES6 的 require 函数或 import 关键字来包含每个文件。如果您已通过 npm 将整个 MUI 作为依赖项安装，则可以根据需要包含每个文件。 有很多很棒的资源可以帮助您开始使用 Material UI。这是文档的链接，您可以在其中找到示例项目以开始使用。 material-ui.com/getting-started/example-projects以上是关于如何使用material-ui框架？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
Material-UI：如何将 Drawer 组件置于 AppBar 下方
如何关闭material UI上下文菜单，而不显示默认的上下文菜单？