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