VuetifyJS — строим свое приложение в стиле Material Design

Если Вы уже хорошо знакомы с VueJS и имеете за плечами несколько завершенных на нем проектов, то предлагаем познакомиться с компонентным фреймворком VuetifyJS.

Об инструменте

VuetifyJS — это огромный пак готовых компонентов для приложения на VueJS. Кастомных компонентов настолько много, что, по началу, можно легко запутаться в них. Здесь есть и своя разметка, и своя типографика и т.д. В общем, полный набор для интерфейса приложения.

Первая мысль, которая приходит при использовании VuetifyJS , состоит в ощущении того, что Вы «обмазываетесь» компонентами с ног до головы. И обратно. Очень важно с самого начала делать все по документации. Кстати, последняя на русском языке и вполне практичная.

Начало пользования

Устанавливаем с помощью NPM:

$ npm install @vue/cli -g

Или подключаем из CDN:

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>Hello world</v-container>
      </v-content>
    </v-app>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  <script>
    new Vue({ el: '#app' })
  </script>
</body>
</html>

Итак, фреймворк подключен. Можно интегрировать его в свой проект. Закидываем в main.js:

import Vue from 'vue'
import Vuetify from 'vuetify'
 
Vue.use(Vuetify)

Если ставите пакеты через NPM, то не забудьте подключить файл стилей:

// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader

Поскольку Vuetify крепко связан с Material Icons, самым простым способом будет подключить иконки в разметке:

<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
</head>

Или локально в приложение:

// index.js or main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

Если требуется, подключаем и шрифты:

// App.vue
import WebFontLoader from 'webfontloader'
 
export default {
  mounted () {
    WebFontLoader.load({
      google: {
        families: ['Roboto:100,300,400,500,700,900']
      },
      active: this.setFontLoaded
    })
  },
  methods: {
    setFontLoaded () {
      this.$emit('font-loaded')
    }
  }
}

В целом, необходимые пакеты установлены и подключены. Рекомендуем помнить о полифилах и не забывать подключать их в проект.

Использование VuetifyJS

Любое приложение должно строиться по примерно такой структуре:

<v-app>
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app></v-footer>
</v-app>

Тут отметим, что ВСЕГДА необходимо оборачивать все компоненты Vuetify в компонент v-app (подробнее). Если этого не сделать, то можно с легкостью убить пару часов на банальные проблемы.

На сайте фреймворка можно найти полноценную документацию по всем компонентам и возможностям.

Итоги

Можно сказать, что Vuetify — это очень раздутый инструмент, который становиться полезным после основного изучения. Так что, будьте готовы потратить 2-3 часа на чтение мануалов. В конечном результате этот фронтенд-пак становится приятным фактором в разработке приложений. В нем можно найти готовое решение для интерфейса практически любой задачи.

Телеграм-канал JavaScript Daily Practice