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