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

Posted 2022-06-09 严振杰

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

用命令行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