如何使用material-ui框架? [英] How to use material-ui framework?

问题描述

我计划使用Material-UI CSS框架( http://material-ui.com )来设计前端-网站的结尾，但我对如何使用此框架一无所知.

I'm planning to use Material-UI CSS framework (http://material-ui.com) in order to design front-end of a website, but I don't have any idea about how to use this framework.

我对NPM，Browserify等并不很熟悉.我只需要知道如何开始才能学习使用此CSS框架的方式.

I'm not familiar a lot with NPM, Browserify, etc. I just need to know how shall I start in order to learn the way to use this CSS framework.

感谢您的帮助！

推荐答案

不要被webpack和其他(出色的)构建工具的(表面上)复杂性吓倒，也不要因嫉妒的人而things之以鼻就像老实说，我认为您在使用这些东西时遇到了很大的问题."

Don't be intimidated by the (apparent) complexity of webpack and other (great) build tools, and don't be discouraged by envious jerks who say things like "To be honest, I think you got a big problem to use this stuff."

material-ui实现(使用)基于这些工具的原因是，因为它是当前编写软件以及理解此框架和其他框架的最佳方式，是了解为什么这是正确"方式的好方法，并精通编写高质量的模块化代码.

The reason why the material-ui implementation (usage) is based on these tools is because is currently the best way to write software and understanding this and other frameworks is a great way to learn why this is the "right" way, and become proficient at writing quality modular code.

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

Webpack, and the other build tools, exist for one purpose: to create one "main" file from your app's source code that can be read and delivered to your users' browser in an efficient manner. Long gone are the days when we would write a bunch of include (script) tags for every resource (file) we need in our pages and thus have our users wait until all these were downloaded from our server (or multiple locations e.g.: cdns) and then the page would load. The efficiency is based on the fact that you can deliver one (often minified/compressed) file that contains all your code and any code it depends on (e.g. React or even jQuery).

构建工具通过询问三件事来完成此任务:以哪个文件开头(进入主文件)，使用什么工具(加载器)来处理代码中的非本地JavaScript代码(scss，jsx等)以及什么作为结果创建的文件(转换后的输出和最小化的输出).此输出文件将是您在html import/script标记中使用的文件.它将包含您的代码以及所有其他依赖性，这将是您自己手动添加和解决的噩梦. 此处是很好的初学者指南.

Build tools accomplish this by asking you 3 things: what file to start with (entry main file), what tools (loaders) to use to process non-native JavaScript code within your code (scss, jsx, etc) and what file to create as the result (converted and minified output). This output file will be the one you use in your html import/script tag. It will contain your code plus all other dependencies, which would be a nightmare to include and resolve manually yourself. Here is a good beginners' guide.

与其他许多框架一样，材料用户界面(我花时间解释以上所有内容的原因)在构建时就考虑到了模块化:可以像Legos一样将代码段粘合"或组合"在一起，以便轻松制造更大的零件.您只需将所需的组件包含在您创建的任何组件中即可.它们是React组件，是定义(编写/创建)网站/应用程序构建基块"的简单方法.有很多很棒的视频和教程可以帮助您开始使用React(我最喜欢的是Tyler McGinnis的reactjsprogram.com).

Material-ui, like many other frameworks (reason why I took the time to explain all of the above) is built with modularity in mind: pieces of code can be "glued" or "pieced" together like Legos, in order to easily build bigger parts. You do this by simply including the components you need in any component you create. They are React components which are a simple way to define (write/create) the "building blocks" of your site/app. There are tons of great videos and tutorials to get you started with React (my favorite is reactjsprogram.com by Tyler McGinnis).

为了让您开始使用Material-ui，他们创建了一些示例，以使用webpack入门.按照简单的步骤安装npm和依赖项(可以在package.json中找到它们)，并在编辑器中打开/src目录.您很快就会发现它.

To get you started with material-ui, they have created a couple of examples to get started using webpack. Follow the simple steps to install npm and the dependencies (you can find them in package.json) and open the /src directory in your editor. You'll figure it out in no time.

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

You are in the right track with the right attitude by asking questions, learning to be a good developer, researching and trying to find the easiest way to accomplish your goal.

这篇关于如何使用material-ui框架?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！