首页手记初识Material-UI

初识Material-UI

标签：

WebApp

简介

Material-UI是一组实现了谷歌Material Design设计原则的React组件集合，江湖传言使用Material-UI可以使我们的页面颜色更鲜艳，动画效果更突出（符合Material Design的设计风格），那么接下来就由我来带大家围观下吧~

Material-UI

What is Material Design

究竟什么是Material Design呢？

“设计是创造的艺术，我们的目标就是要满足不同的人类需要。人们的需要会随着时间发展，我们的设计，实践，以及理念也要随之提升。我们在自我挑战，为用户创造了一个可视化语言，它整合了优秀设计的经典原则和科学与技术的创新。这就是Material Design。” —— 关于Material Design，其亲爹谷歌是这么介绍的。

Material Design的设计风格如下图，其核心思想就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。

Material Design设计风格

Material Design的设计原则如下：

实体感就是隐喻（通过系统的动效和合理的空间利用去打造与众不同的触感）；
鲜明、形象、深思熟虑（制定了基础的平面设计规范，提升用户体验）；
有意义的动画效果（合理的有意义的动效可以吸引用户的注意力，并且维持整个系统的连续性体验）；

对于Material Design就简单介绍到这里，由于本人不是做设计的，就不搁这白话了，全凭大家用心去感受，如果大家对Material Design感兴趣可以关注官方的文档及规范。

麻溜滴，上DEMO

在我们的开发环境配置过程中，我们会用到node.js，so，没有npm的同学请自行装之。

请带上你的依赖包

首先在我们的A、B、C、D、E、F、G任意盘上创建demo项目文件夹，执行命令如下：

# 创建demo项目文件夹mkdir material-uicd material-ui# 初始化package.json文件npm init

接下来安装依赖包，拥为Material-UI在编写时用到了ES2015的一些特性，所以在配置过程中我们会用到Babel( 一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境中执行)。我们还会用到webpack（作为模块加载器和打包工具），执行命令如下：

# 安装Material-UI部分npm install --save material-ui# 安装React部分npm install --save react react-dom react-tap-event-plugin# 安装Babel转换器核心部分npm install --save-dev babel-core babel-loader 
# 安装Babel转换器的三个额外配置：ES2015（ES6），React，Stage1（ES7）npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1# 安装webpacknpm install --save-dev webpack

配置Babel

上述过程如果顺利完成的话，在 package.json 中添加一个对象babel，与"dependencies"保持同级。如果不顺利的话，那么恭喜你，请再来一遍上述过程，与此同时面向西方开启跪拜模式吧。。。

package.json内容如下：

"babel" : { 
    "presets" : [ 
        "es2015",  
        "react", 
        "stage-1" 
    ], 
    "plugins": [] 
}

配置webpack

在我们项目根目录下新建webpack的配置文件webpack.config.js，其内容如下：

var path = require('path');var webpack= require('webpack');module.exports = { 
    entry: './entry.js',  // 入口文件
    output: { 
        path: path.join(__dirname, '/dist'),  // 打包路径
        filename: 'bundle.js' // 打包文件名称
    }, 
    resolve: { 
        extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
        loaders: [ { 
            test: /\.jsx?$/, 
            loaders: ['babel'] 
        } ] 
    }
}

写一个AppBar

在项目根目录下新建index.html，并引入我们生成的bundle.js，内容如下：

<!DOCTYPE html><html lang="en"><head>    
    <meta charset="UTF-8">    
    <title></title></head>    <body>
    <div id="app"></div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="dist/bundle.js"></script></body></html>

创建entry.js，其内容如下：

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';const App = () => ( 
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
        <AppBar title="Hello World!" /> 
    </MuiThemeProvider>);
ReactDOM.render(<App />, document.getElementById('app'));

在命令行中输入webpack，执行打包操作，执行成功后，命令显示如下：