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

版权声明:转载须标明本文转自严振杰的博客 https://blog.csdn.net/yanzhenjie1003/article/details/52461237

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

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

今天介绍一款实现Material Design的开源项目Material-UI,它是一组用来实现Google的Material Design设计规范的React组件,它是一个前端js框架,主要用在web领域,为了在网页前端实现Material Design风格,今天主要带领大家认识一下它的面貌,并且实现一个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事例

配置sample

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

npm install

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

sample安装

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

安装sample完成

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

运行sample

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

npm start

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

http://localhost:3000/

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

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

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


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

阅读更多

扫码向博主提问

严振杰

博客专家

学而不思则罔,思而不学则殆。
  • 擅长领域:
  • Android
  • JavaEE
去开通我的Chat快问
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页