Первое знакомство с Material-UI

внешний интерфейс Google React.js Material Design

Введение

Material-UIэто группа, которая внедряет GoogleMaterial DesignКоллекция компонентов React, основанная на принципах дизайна. Ходят слухи, что использование Material-UI может сделать цвета нашей страницы более яркими, а эффект анимации более заметным (в соответствии со стилем дизайна Material Design), тогда позвольте мне показать вам ~

Material-UI

What is Material Design

Что такое материальный дизайн?

«Дизайн — это искусство творения, и наша цель — удовлетворить различные потребности людей. Потребности людей будут меняться со временем, и наши проекты, методы и идеи также будут улучшаться. Мы бросаем себе вызов, создавая для пользователей. Визуальный язык, который объединяет классические принципы хорошего дизайна с инновациями в науке и технике. Это Material Design». —— Что касается Material Design, его отец Google представил его так.

Стиль дизайна Material Design выглядит следующим образом:Его основная идея состоит в том, чтобы перенести опыт физического мира на экран.. Удалите примеси и случайность в реальности, сохраните ее наиболее первоначальную и чистую форму, пространственные отношения, изменения и переходы и сотрудничайте с гибкими характеристиками виртуального мира, чтобы восстановить наиболее реалистичный опыт для достижения лаконичного и интуитивного эффекта.

Material Design设计风格

Принципы дизайна Material Design заключаются в следующем:

  • Чувство вещества представляет собой метафору (создать отличительное касание через систематическое движение и разумное использование пространства);
  • Яркий, красочный и хорошо продуманный (устанавливает основные требования к графическому дизайну для улучшения взаимодействия с пользователем);
  • Значимые анимационные эффекты (разумные и значимые анимационные эффекты могут привлечь внимание пользователя и обеспечить непрерывное взаимодействие с системой);

Здесь я кратко представлю Material Design.Поскольку я не дизайнер, я не буду приводить это просторечие.Все зависит от вас, чтобы почувствовать это своим сердцем.Если вы заинтересованы в Material Design, вы можете обратить вниманиеОфициальные документы и спецификации.

Ма Люди, на ДЕМО

В нашем процессе настройки среды разработки мы будем использоватьnode.js, так что нетnpmстуденты, пожалуйста, установите его самостоятельно.

Пожалуйста, принесите свои зависимости

Для начала создаем папку демо-проекта на любом диске нашего A, B, C, D, E, F, G и выполняем команду следующим образом:

# 创建demo项目文件夹
mkdir material-ui
cd 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

# 安装webpack
npm install --save-dev webpack

Настроить Бабель

Если вышеуказанный процесс завершен успешно, вpackage.jsonдобавить объект вbabel, который родственен «зависимостям». Если что-то пойдет не так, поздравляю, пожалуйста, повторите описанный выше процесс еще раз и в то же время откройте режим стояния на коленях лицом на запад. . .

package.jsonСодержание следующее:

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

настроить веб-пакет

Новые файлы конфигурации 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'] 
        } ] 
    }
}

Написать панель приложений

Создайте новый проект в корневом каталоге проектаindex.html, и представляем наш сгенерированныйbundle.js, содержание следующее:

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">    
    <title></title>
</head>    
<body>
    <div id="app"></div>
    <script src="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, выполнить операцию упаковки, после успешного выполнения команда отображается следующим образом:

命令行输出信息

Теперь вы можете видеть, что в каталоге есть dist/bundle.js, откройте index.html, эффект будет таким, как показано на рисунке:

HelloWorld

До сих пор мы реализовали простую страницу с помощью компонента AppBar Material-UI. Кроме того, Material-UI также реализовал множество практических компонентов и позволяет нам изменять тему компонента, внутренние стили, цвета и другие операции настройки. . На этом этапе у вас должно быть предварительное представление о Material-UI.Если вы хотите узнать больше, обратитесь к егоОфициальный сайт.

Категории