首先Material-UI?是一套用React寫成的滚躯，符合Google Material Design 的UI組件庫圃酵，有些庫就依賴于react的環(huán)境柳畔。
第一步:創(chuàng)建一個react demo的運(yùn)行環(huán)境： win+r ，cmd窗口郭赐，在你的preject路徑下
1. $mkdir materialui
2. $cd materialui
第二步安裝所需要的包和文件薪韩，大方向分別是node.js, react, babel, material_UI.
安裝node.js的話大家去官網(wǎng)版本的話node版本影響不大https://nodejs.org/en/下載穩(wěn)定版
1.?
安裝node.js(會自動安裝npm下載工具)
2.
?$ npm install -g cnpm --registry=https://registry.npm.taobao.org（淘寶的國內(nèi)鏡像下載 可以用cnpm代替 npm）
3.?
cnpm install material-ui@0.15.0(注意版本號，由于兼容性導(dǎo)致的問題是非常難以解決的)
cnpm ?install reacti@15.0.0
cnpm ?install react-dom@15.0.0
cnpm ?install react-tap-event-plugin@1.0.0
接下來安裝依賴的環(huán)境
cnpm install babel-core@6.8.0
cnpm install ?babel-loader@6.2.4
cnpm ?install? babel-preset-es2015@6.6.0
cnpm ?install? babel-preset-react"@6.5.0
cnpm ?install? babel-preset-stage-1@6.5.0
cnpm? install? webpack@1.13.0
4.
cnpm init 會出現(xiàn)一個package.json 的的文件捌锭，然后查看下配置文件
去用ue編輯器打開看看這個.json文件的配置對不對俘陷，不對的話加上去，特別是這兩個地方观谦。
如果為空拉盾，按json的格式填寫進(jìn)去，順便把babel的配置和script的配置也加進(jìn)去
"babel": {
"presets":["es2015","react","stage-1"],
"plugins":[]}豁状，
"scripts": {
"build":"webpack",
"build-dev":"webpack -w -d"}
5.
增加一個webpack.config.js 的配置文件寫入配置捉偏，放在materialui下
varpath =require('path');
module.exports = {
entry:'./entry.js',
output: {
path: path.join(__dirname,'/dist'),
filename:'bundle.js'},
resolve: {
extensions: ['','.js','.jsx']
},
module: {
loaders: [
{ test:/\.jsx?$/, loaders: ['babel'] }
]
}
}
再增加一個entry.js 放在materialui下
import React from'react';
import ReactDOM from'react-dom';
import getMuiTheme from'material-ui/styles/getMuiTheme';
import MuiThemeProvider from'material-ui/styles/MuiThemeProvider';
import AppBar from'material-ui/AppBar';constApp = () => ();let app = document.createElement('div');ReactDOM.render(, app);document.body.appendChild(app);
6.
建立一個index.html放在material 的目錄下：
在cmd窗口執(zhí)行 cnpm run build 沒有出意外的話會是這個結(jié)果
打開material 下的index.html
非常感謝lzumoRiki同學(xué)，我按照他的博客替蔬，再糾正了一些版本小問題就搭建成功了告私，我這個應(yīng)該更簡單粗暴一點(diǎn)。
