如何使用material-ui框架？

Question

如何使用material-ui框架？

jmo*_*awy 30 material-design material-ui

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

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

谢谢你的帮助!

Answer 1

小智 39

不要被webpack和其他(伟大的)构建工具的(明显的)复杂性所吓倒,也不要被嫉妒的混蛋所劝阻,他们说"老实说,我认为你使用这个东西有一个大问题".

material-ui实现(用法)基于这些工具的原因是因为目前是编写软件和理解这个和其他框架的最佳方式,这是了解为什么这是"正确"方式并变得精通的好方法在编写高质量的模块化代码

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

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

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

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

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

可以在没有 React 的情况下使用它吗？只是一个 `.css` 和 `.js`，如果可能是一个 gem？ (2认同)

Answer 2

dka*_*itz 23

有几乎相同的问题.想要一种简单的方法来开始使用材料-ui而不是乱码.这是我做的:

npm install material-ui
npm install -g webpack
webpack node_modules/material-ui/lib/index.js material-ui.js

Run Code Online (Sandbox Code Playgroud)

这给了我一个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>

Run Code Online (Sandbox Code Playgroud)

Answer 3

cla*_*o_n 10

除了作为CSS框架之外,Material-UI还是一组React组件.我不知道你是否可以在不理解React的情况下使用它.

最简单的入门方法是安装示例并从那里开始.

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

归档时间：	10 年，11 月前
查看次数：	35879 次
最近记录：	9 年前