Если Вы уже хорошо знакомы с 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 часа на чтение мануалов. В конечном результате этот фронтенд-пак становится приятным фактором в разработке приложений. В нем можно найти готовое решение для интерфейса практически любой задачи.