Web Material-UI 详解(一) 环境搭建与Helloword

Web Material-UI 详解(一) 环境搭建与Helloword

版权声明:转载必须注明本文转自严振杰的博客: http://blog.yanzhenjie.com

今天介绍一款实现Material Design的开源项目Material-UI,它是一组用来实现Google的Material Design设计规范的React组件,它是一个前端js框架,主要用在web领域,今天主要带领大家认识一下它的面貌,并且实现一个Helloword。

Google Material Design官网:https://material.google.com/

Material-UI项目官网:http://www.material-ui.com/

Material-UI项目源码:https://github.com/callemall/material-ui


Material-UI 环境搭建

很多人在Material-UI项目主页或者官网看到npm install material-ui就想到底怎么安装,英文不好的同学看人家官网教程又看不懂。

第一步安装nodejs

其实这个npm是nodejs的命令,我们要先安装nodejs:

安装Node.js,到官网下载系统响应版本:https://nodejs.org/en/download/,下载好后正常安装即可。

  • 注意:

    • 安装的时候有一个选项是适配配置到系统的path环境中,一定要选是。
    • 如果你没有选择或者你是解压版的nodejs则要自己配置到path中。

第二步安装Material-UI

安装好nodejs后打开命令行cmd,运行以下命令自动远程安装Material-UI稳定版:

npm install material-ui

如果你远程安装失败了,请求参考一下文档,从本地安装:

https://docs.npmjs.com/getting-started/installing-npm-packages-locally

以下的大家可以作为了解内容,安装Material-UI预发布版:

npm install material-ui@next

请注意@next将只指向预发行版;用@latest安装最新稳定版本。

到这里环境安装就完成了。

官网demo运行

Material-UI的项目源码主页上有两个Sample:https://github.com/callemall/material-ui/tree/master/examples,有些同学可能不会下载,我这里直接给出下载连接:

下载第一个

下载第二个

如果某天你进来我博客发现这两个连接不能下载了,还是去Sample连接自行下载。

下载解压sample

上面第一个是基于gulp的,第二个是基于webpack的,我这里以第一个为例。下载第一个到本地,解压后的目录结构大概如下:

配置sample

用命令行cmd进入到这个解压后的文件夹,接着执行:

npm install

安装过程中会如下转圈圈:

安装完成后,目录内会多一个文件夹:node_modules,安装完成的命令行界面如下:

这个命令会根据项目配置安装和编译有关的内容到这个项目文件夹,具体是什么配置,安装了什么你不用关心,如果怕占用空间和垃圾,等下运行完直接删除这个文件夹即可。

运行sample

执行下面的命令编译并运行项目了:

npm start

这个项目会根据配置编译好项目,编译好项目后在刚才解压的sample目录多一个build文件夹,里面是编译好的html、css、js各一个。此时浏览器也会自动开启并打开如下地址:

http://localhost:3000/

如果浏览器没有自动打开,你也可以手动打开并输入上述地址,甚至你可以直接打开build文件夹内的index.html,运行的效果如下:

你也可以把上面build好的代码拷贝到你的其他服务器,比如tomcat中运行。

Ok,今天的讲解就到这里,还会不断出系列教程的,我的博客主页:http://blog.yanzhenjie.com,欢迎关注我的微信公众号:严振杰。


版权声明:转载必须注明本文转自严振杰的博客: http://blog.yanzhenjie.com

时间: 2024-11-05 22:55:45

Web Material-UI 详解(一) 环境搭建与Helloword的相关文章

Dubbo使用详解及环境搭建

一:Dubbo简介 Dubbo是阿里巴巴提供的开源的SOA(面向服务的体系结构)服务化治理的技术框架,据说只是一部分开源的,但一些基本的需求已经可以满足的,而且可扩展性.是一种能取代PHRPC的服务调用方式,优点在于配置简单,二次开发性强,同时DUBBO对代码的侵入性低. 二:Dubbo整体理解 现在DUBBO的配置文件主要分为两部门dubboConsumer.xml (可以理解为客户端) ,dubboProvider.xml(服务端)用通俗的话来讲dubboConsumer是调用方,dubbo

ANDROID L——Material Design详解(UI控件)

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lollipop(5.0). 前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 所以是时候开始学习Android L了! 关于Android L如何配置模拟器和创建项目,如果大家有兴趣的话可以看看我之前的一篇文章: A

Web开发典藏大系:Web性能测试实战详解 PDF扫描版

本书主要讲解了大数据背景下的Web性能测试的特点和方法,以及使用业内应用非常广泛的工具――LoadRunner 11进行性能测试的具体技术与技巧.本书理论结合实践,讲解图文并茂,并且将IT技术与生活场景结合起来,生动而又形象. 本书共17章,分为5篇.第1篇介绍软件测试的定义.方法和过程.Web应用开发与测试等内容:第2篇介绍Web应用技术.Web性能测试的基础.Web性能测试的方法和各操作系统性能计数器的获取等内容:第3篇介绍如何使用LoadRunner进行Web应用性能测试,包括LoadRu

ANDROID L——Material Design详解(视图和阴影)

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: 昨天凌晨Google刚刚确认Android L就是Android Lollipop(5.0). Google之前就已经提前推出了Android L Developer Preview(开发者预览版)来帮助开发者更快的了解Android特性,而不久前也推出了64位的模拟器镜像,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 相信And

ANDROID L——Material Design详解(动画篇)

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lollipop(5.0). 前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 所以是时候开始学习Android L了! 关于Android L如何配置模拟器和创建项目,如果大家有兴趣的话可以看看我之前的一篇文章: A

Web.xml配置详解(转)

Web.xml配置详解 Posted on 2010-09-02 14:09 chinaifne 阅读(295105) 评论(16) 编辑 收藏 1 定义头和根元素 部署描述符文件就像所有XML文件一样,必须以一个XML头开始.这个头声明可以使用的XML版本并给出文件的字符编码.DOCYTPE声明必须立即出现在此头之后.这个声明告诉服务器适用的servlet规范的版本(如2.2或2.3)并指定管理此文件其余部分内容的语法的DTD(Document Type Definition,文档类型定义).

java web.xml配置详解

1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个ServletContext(servlet上下文),这个web项目的所有部分都将共享这个上下文. 3.容器将<context-param>转换为键值对,并交给servletContext. 4.容器创建<listener>中的类实例,创建监听器. 二  Load-on-startup Load

Java web.xml 配置详解

在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是,加载顺序与它们在 web.xml 文件中的先后顺序无关.即不会因为 filter 写在 listener 的前面而会先加载 filter.最终得出的结论是:listener -> filter -> servlet 同时还存在着这样一种配置节:context-param,它用于向 Servlet

《Tomcat与Java Web开发技术详解》思维导图

越想构建上层建筑,就越觉得底层基础很重要.补课系列. 书是良心书,就是太基础了,正适合补课. [纯文字版] Tomcat与Java Web开发技术详解 Servlet Servlet的生命周期 初始化 1Servlet容器加载Servlet类 2Servlet容器创建ServletConfig,初始化配置信息 3Servlet容器创建Servlet对象 4Servlet容器调用Servlet对象的init(ServletConfig) 时机:首次被请求或配置了<load-on-startup>