Web Material-ui detailed (a) environment construction and Helloword

Web Material-ui detailed (a) environment construction and Helloword

Copyright Notice: Reprint must indicate this article transferred from Zhangjie's Blog: http://blog.yanzhenjie.com

Today introduces an open source project for implementing Material design Material-ui, a set of react components used to implement Google's Material design specification, A front-end JS framework that is used primarily in the web domain , today we will lead you to a helloword of the face and the realization of it.

Google Material Design Website: https://material.google.com/
Material-ui Project Official Website: http://www.material-ui.com/
Material-ui Project Source: Https://github.com/callemall/material-ui

Material-ui Environment Construction

Many people in the Material-ui Project homepage or the official website npm install material-ui to see just how to install, English bad classmate See others official website tutorials and do not understand.

First Step installation Nodejs

In fact, this npm is Nodejs command, we need to install Nodejs first:
Install node. js, Download the system response version: https://nodejs.org/en/download/, Download the normal installation can be DONE.

• Attention:
  
  • When installing, there is an option to configure the system to the path environment, be sure to select Yes.
  • If you do not have a choice or if you are the decompression version of the Nodejs you have to configure yourself to Path.

Step Two Install Material-ui

After installing nodejs, Open the command line cmd and run the following command to automatically install the Material-ui stable version remotely:

install material-ui

If your remote installation fails, request a reference to the documentation from the local installation:
Https://docs.npmjs.com/getting-started/installing-npm-packages-locally

The following can be used as an understanding of the content, install Material-ui pre-release version:

npm install material-ui@next

Note that @next you will only point to the pre-release version, with the @latest latest stable version Installed.

The installation of the environment here is Complete.

Website Demo Run

Material-ui Project source page has two sample:https://github.com/callemall/material-ui/tree/master/examples, some students may not download, Here I directly give the download connection:
Download the first one
Download a second

If one day you come in my blog found that these two connections can not be downloaded, or to the sample connection to download Themselves.

Download Unzip sample

The first one is based on gulp, the second one is based on webpack, and here I take the first example. Download the first to local, the extracted directory structure is probably as Follows:

Configure sample

Use the command line cmd to enter the extracted folder, then execute:

install

During installation, the following loops are Turned:

After the installation is complete, there will be one more folder in the Directory: node_modules, the following command line interface is installed:

This command will be based on the project configuration to install and compile related content to this project folder, specifically what configuration, installed what you do not care, if you are afraid to occupy space and garbage, wait for the next run to delete this folder.

Run sample

Execute the following command to compile and run the Project:

start

This project will compile the project according to the configuration, compile a good project in the sample directory just extracted a build folder, which is compiled html, css, JS each one. The browser will also automatically turn on and open the following address:

http://localhost:3000/

If the browser does not open automatically, you can also manually open and enter the above address, even you can directly open the index.html in the build folder, the effect is as Follows:

You can also copy the above build code to your other servers, such as Tomcat.

Ok, today's explanation is here, will continue to be a series of tutorials, my blog home: http://blog.yanzhenjie.com, Welcome to follow my public number: Zhangjie.

Copyright Notice: Reprint must indicate this article transferred from Zhangjie's Blog: http://blog.yanzhenjie.com

Web Material-ui detailed (a) environment construction and Helloword