Использование Material Design с Vue.js 2

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Материальный дизайн, созданный и разработанный Google, представляет собой язык дизайна, сочетающий в себе классические принципы успешного дизайна с инновациями и технологиями. Цель Google - разработать систему дизайна, обеспечивающую унифицированный пользовательский интерфейс на всех платформах.

Общее введение и обзор Material Design от Google можно найти на странице https://material.google. com / .

Поскольку Vue.js 2 отлично подходит для создания уровня представления одностраничных веб-приложений, Material Design отлично подходит. Далее вы узнаете, как добавить Material Design в свой проект Vue.js 2.

vue-материал

Библиотека vue-material доступна по адресу https://github.com/marcosmoura/vue-material и может использоваться для установки библиотеки Material Design в вашем проекте Vue.js.

Настройка проекта Vue.js 2 с помощью Vue CLI

Прежде чем начать использовать Material Design, давайте начнем с нового проекта Vue.js 2. Используя интерфейс командной строки (CLI) Vue, этот процесс становится простым. Сначала выполните следующую команду:

$ vue init webpack vuejs-md-01

Эта команда загружает шаблон проекта Vue.js на основе Webpack и устанавливает этот шаблон в новую папку vuejs-md- 01. Перейдите в этот каталог и завершите настройку проекта, установив зависимости через:

$ npm install

Теперь вы можете запустить веб-сервер в режиме разработки:

$ npm run dev

Добавить в проект библиотеку vue-material

Давайте установим библиотеку vue-material следующим образом:

$ npm install --save vue-material

Эта команда гарантирует, что vue-material установлен во вложенную папку node_modules и что зависимость добавлена в package.json.

Затем добавьте следующие элементы ссылки в раздел заголовка index.html:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

Затем нам нужно включить два оператора импорта в раздел сценария main.js, чтобы сделать vue-material доступным в проекте:

import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

Наконец, мы активируем VueMaterial, выполнив метод Vue.use:

Vue.use(VueMaterial)

Используйте компоненты материального дизайна в своем шаблоне

Что мы собираемся построить

С добавлением библиотеки vue-material к нашему проекту мы готовы использовать компоненты Material Design для реализации пользовательского интерфейса нашего приложения.

Давайте сначала взглянем на приложение, которое мы собираюсь построить в следующих шагах:

Как видите, пример приложения состоит из заголовка, двух кнопок и пустой таблицы. С помощью кнопки Заполнить таблицу вы можете добавить несколько записей в таблицу:

Кнопка Очистить таблицу удаляет все записи таблицы.

Реализация шаблона компонента приложения

Давайте воспользуемся существующим файлом App.vue из шаблона проекта по умолчанию для реализации пользовательского интерфейса Material Design. Сначала удалите существующий код шаблона из App.vue и замените его следующим кодом:

<template>
  <div id="app">
    <md-card>
      <md-card-header>
        <div class="md-title">Material Design with Vue.js 2 Demo</div>
        <div class="md-subhead">by CodingTheSmartWay.com</div>
      </md-card-header>
      <md-card-content>
        
        <md-button class="md-raised md-primary" v-on:click="fillTable()">Fill table</md-button>
        <md-button class="md-raised md-primary" v-on:click="clearTable()">Clear table</md-button>
        <br />
         <md-table>
          <md-table-header>
            <md-table-row>
              <md-table-head>First name</md-table-head>
              <md-table-head>Last name</md-table-head>
              <md-table-head>Email</md-table-head>
            </md-table-row>
          </md-table-header>
          <md-table-body>
            <md-table-row v-for="contact in contacts">
              <md-table-cell>{{contact.firstname}}</md-table-cell>
              <md-table-cell>{{contact.lastname}}</md-table-cell>
              <md-table-cell>{{contact.email}}</md-table-cell>
            </md-table-row>
          </md-table-body>
        </md-table>
      </md-card-content>
    </md-card>
  </div>
</template>

Как видите, мы используем различные компоненты Material Design для создания пользовательского интерфейса. Полный обзор компонентов, включенных в vue-material, доступен по адресу: https://vuematerial.github.io/#/.

Кнопки включаются с помощью элемента <md-button>. Используя директиву v-on: click, мы можем добавлять обработчики событий к событиям нажатия обеих кнопок (fillTable и clearTable) .

Содержимое таблицы распечатывается путем создания нового элемента <md-table-row> для каждого элемента, содержащегося в массиве contacts. Для этого мы используем директиву v-for.

Реализуйте методы обработчика событий

Чтобы кнопки работали должным образом, нам теперь нужно добавить в наше приложение оба метода обработчика событий. Мы добавляем оба метода внутри объекта, который назначается свойству methods внутри объекта конфигурации компонента:

<script>
export default {
    name: 'app',
    data: function () {
      return {
        contacts: []
      }
    },
    methods: {
      fillTable: function() {
        this.contacts.push({firstname: 'Sebastian', lastname: 'Eschweiler', email: '[email protected]'});
        this.contacts.push({firstname: 'Bill', lastname: 'Smith', email: '[email protected]'});
        this.contacts.push({firstname: 'Ann', lastname: 'Parker', email: '[email protected]'});
      },
      clearTable: function() {
        this.contacts.splice(0, this.contacts.length);  
      }
    }
}
</script>

Поскольку содержимое таблицы создается из массива contacts, в методе fillTable мы используем метод push для добавления новых объектов в array и тем самым заполните таблицу.

Метод clearTable реализуется с помощью метода splice для удаления всех записей из массива. Поэтому методу необходимо передать два параметра: 0 и текущую длину массива (доступную через свойство length).

Резюме

Использование пакета vue-material позволяет легко интегрировать язык материального дизайна Google в ваш проект Vue.js и сделать компоненты материального дизайна доступными в шаблоне вашего компонента.

Видеоурок

Этот видеоурок содержит шаги, описанные в тексте выше:

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Использование Material Design с Vue.js 2