Что такое vuetify

Быстрый старт

Используйте один из пакетов CLI Vuetify Vue (на основе официальных примеров) , чтобы мгновенно запустить ваш проект. Vuetify поддерживает SSR (рендеринг на стороне сервера), SPA (одностраничное приложение), PWA (прогрессивное веб-приложение) и стандартные HTML страницы.

Поддерживаемые браузеры

Vuetify — это прогрессивный фреймворк, который пытается продвинуть веб-разработку на следующий уровень. Чтобы лучше выполнить эту задачу, мы пошли на некоторые жертвы, с точки зрения поддержки более старых версий Internet Explorer. Это не исчерпывающий список совместимых браузеров, а основные целевые.

Поддерживается
Поддерживается
Поддерживается
Поддерживается
IE11 / Safari 9
Поддержка с polyfill
Не поддерживается

Новые приложения

Vue-CLI 3 — инструмент нового поколения, созданный для еще более быстрого старта, чем ранее. Когда вы создаете ваше приложенияе с помощью vue-cli, вы также сможете получать официальные обновления и изменения настроек webpack, а также обновления Vuetify без трудоёмкого процесса обновления.

content_copy

Чтобы узнать, как использовать Vue-CLI-3, прочитайте официальную документацию

Когда Vue-CLI 3 установлен, вы можете легко создать новый проект. Выбирайте default install, пока вам не нужны специфические пакеты (например vuex или vue-router). Vue-CLI 3 создаст новый проект Vue с выбранными опциями, который уже готов к работе.

content_copy

Совет: Если у вас уже установлен vue-cli, убедитесь, что вы используете последнюю версию, выполнив vue —version в своём терминале.

Когда вы создали проект, добавьте плагин Vuetify , используя cli.

content_copy

Это даст вам набор опций для настройки Vuetify. В стандартных настройках a-la-carte включен по умолчанию.

content_copy

После установки, просто запустите yarn serve или npm run serve , чтобы запустить своё новое приложение.

Существующие приложения

Чтобы включить Vuetify в существующий проект, вы должны подключить его в свои node_modules. Для этого вы можете использовать npm или yarn . Это оба менеджера пакетов, которые позволяют вам контролировать, какие ресурсы доступны для вашего приложения.

Подробное объяснение того, как запустить npm в вашей среде, см. В официальной документации . Кроме того, если вы хотите использовать yarn , вы можете найти официальную документацию здесь . После настройки вы можете запустить любую команду из командной строки.

content_copy

После установки Vuetify перейдите к основной точке входа в приложение. В большинстве случаев это будет index.js или main.js . В этом файле вы будете импортировать Vuetify и сообщить Vue, чтобы использовать его.

content_copy

Вам также потребуется подключить css Vuetify . Просто включите css Vuetify в свой index.html или импортируйте в файл stylus или мини-код css.

content_copy
content_copy

Самый простой способ включить иконки Material Icons — добавить тег link в ваш файл index.html .

content_copy

Либо используйте npm или yarn , чтобы установить material-design-icons-iconfont .

warning

Предупреждение. Хотя Vuetify пытается как можно больше не вызвать какой-либо css-коллапс, нет никакой гарантии, что ваши пользовательские стили не изменят ваш стиль при интеграции этой структуры в ваш существующий проект.

Vue UI

Vuetify также можно установить, используя Vue UI, новый интерфейс vue-cli-3. Убедитесь, что вы используете последнюю версию vue-cli:

content_copy

Это запустит Vue UI и откроет новое окно в вашем браузере. Слева, нажмите Plugins. Потом, введите Vuetify в строку поиска.

Установка плагина Vuetify

После установки, вы сможете настроить опции Vuetify.

Vuetify — создаем свое простое приложение

Хоть UI библиотек или фреймворков для Vue.js не так уж и много, но Vuetify как раз здесь больше всего выделяется и по функционалу просто впереди других. Сегодня в этой небольшой статье я расскажу об данном UI фреймворке, его особенности, его структура и вообще к чему его можно применять. И честно в интернете не так уж и много русскоязычных материалов под данной теме, поэтому я решил что-то написать по Vuetify.

P.S. Вот сыллка на GitHub с кодом приложения.

Введение/Установка

Окей, представим что вы решили все таки начать пользоваться Vuetify и написать какое-то своё первое приложение используя его. И начинается все конечно же с установки, для начала давайте создадим новое Vue CLI приложение с помощью npm:

vue create vuetify-app

Важно, надо чтобы приложение имело версию Vue 2.0, поскольку на время написания этой статьи в Vuetify поддержка идёт только для Vue 2.0 приложений. После того как нового приложение было создано — следующим шагом будет установить UI фреймворк как плагин:

vue add vuetify

Нас попросит в дальнейшем выбрать какой-то пресет, и поскольку мы не собираемся пробовать версию V3 (которая нестабильна), то мы выбираем пресет “Default”:

Когда процесс установки Vuetify завершиться, то можно будет запустить локальный сервер приложения:

npm run serve

И открыв https://localhost:8080 мы увидим по-умолчанию созданную страницу от Vuetify с полезными сыллками:

Как мы видим то все работает и самое время начать уже писать наше приложение.

Так о чем же будет наше приложение?

Хороший вопрос, ведь мы создали уже Vue CLI приложение и установили Vuetify, но я так и не сказал что же будет делать именно наше приложение. Мой любимый пример, это мобильное приложение по доставке еды — поэтому давайте это будет тема нашего приложения.

Но перед этим давайте также установим Vue Router:

vue add router

Как обычно при добавлении нового плагина к приложению, терминал может сказать что есть изменения которые не были добавлены в commit, мы здесь пишем “y” (т.е. yes) и двигаемся дальше:

Дальше при установке нас спросит хотим ли использовать режим истории в маршутизации, и здесь мы также тыкаем “y”:

Вот теперь Vue Router установлен, и самое время убрать код примеров в src/router/index.js чтобы когда мы сейчас запустили снова локальный сервер — не было ошибок:

// Файл src/router/index.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ ] const router = new VueRouter(< mode: 'history', base: process.env.BASE_URL, routes >) export default router

Файл маршутизации теперь настроен и не содержит в себе каких-то несуществующих маршрутов, ну а теперь нужно также почистить файл App.vue:

   export default 

Хорошо, теперь мы настроили наши два файла и при запуске не будет никаких ошибок — а самое лучшее это то — что мы можем начинать разрабатывать наше приложение.

Layout

В Vuetify уже есть своя придуманная гибкая система построения сетки в приложении. И давайте сейчас с ней ознакомимся. Для начала нам нужно будет воспользоваться двумя компонентами, это v-app и v-main. Открываем App.vue и добавляем их:

  export default 

С компонента v-app и начинается наше приложение, этот компонент является псевдонимом тега с а в компоненте v-main мы уже начинаем размещать контент самого приложения. Следующим шагом будет добавить хедер с помощью компонента v-app-bar:

Если мы перейдем на локальный сервер — то увидим следующее:

На странице нету ничего кроме нашего хедера. Объясню также для чего я добавил атрибут app в v-app-bar. Когда Vuetify видит что в компоненте v-app-bar есть атрибут app, то он понимает что это часть layout’a приложения. Многие также могут спросить почему я добавил хедер перед v-main, ответ простой: в v-main будет уже располагаться компонент router-view который будет показывать содержимое маршрутов, а поскольку наш хедер это не сам контент приложения — то я и вынес его перед компонентом v-main.

Мне не очень нравится цвет хедера, поэтому давайте его поменяем добавив атрибут color:

Окей, и что если мы перейдем на локальный сервер? То вот что мы с вами увидим:

Круто, а теперь мы можем начинать добавлять уже какой-то контент? Да, но перед этим добавим также заголовок в хедер и компонент просмотра маршутов внутри v-main:

Заголовок мы добавили с помощью компонента v-app-bar-title, и уже внутри прописали тег h4 с классом от Vuetify которые помогают стилизировать текст. Давайте посмотрим как выглядит страница на локальном сервере:

Супер, заголовок есть. Хорошо, теперь самое время начать создавать компоненты в которых и будет контент приложения.

Главная страница

Давайте создадим компонент src/components/List.vue в которым и будет выводиться весь список заведений с помощью JSON массива. Для начала внутри этого компонента создадим переменную items_list, которая и будет хранить в себе список всех заведений:

Окей, список у нас есть, а с помощью каких компонентов от Vuetify будем его выводить? Сейчас воспользуемся компонентом v-card, который позволяет удобно в карточках выводить подобную информацию. Но при этом мы также воспользуемся Bootstrap Vue чтобы элементы красиво располагались на странице.

Многие могут заметить что в row’e где мы уже выводим сами карточки заведения с помощью v-for в компоненте v-col я добавляю атрибут md=”4«. Те кто учили Bootstrap уже должны догадаться для чего нужен этот атрибут и как именно он задает размеры колонок. С помощью этого атрибута я указал чтобы каждая колонка имела размеры 4/12 и благодаря этому на странице карточки будут выводиться по 3 штуки в один ряд. Окей, компонент вывода заведений готов, надо теперь добавить его маршрут в файл src/router/index.js:

import Vue from 'vue' import VueRouter from 'vue-router' import List from '../components/List.vue' Vue.use(VueRouter) const routes = [ < path: '/', name: 'List', component: List >] const router = new VueRouter(< mode: 'history', base: process.env.BASE_URL, routes >) export default router

А теперь давайте перейдем на локальный сервер и посмотрим на результат вывода:

Супер​ У нас есть вывод заведений на главной странице. А теперь я думаю самое время добавить отдельную страницу заведения, которая будет открываться при клике на заголовок карточки. Поскольку у нас нету базы данных с которой мы могли бы брать определенное заведение через API — то сама страница будет статичной.

Страница просмотра заведения

Для начала создаём компонент src/components/CafeView.vue и первое что в нем будет выводиться это изображение с заведением, его заголовок и описание. Для этой базовой информации мы создадим отдельный компонент с названием CafeInfo.vue, но перед этим заполним уже чем-то компонент CafeView.vue:

Хорошо, а теперь создаём компонент CafeInfo.vue:

    .h-100 

Для удобства я специально поместил данные в data функцию. Теперь когда наш компонент готов — самое время сделать маршрут для компонента CafeView.vue в src/routes/index.js:

import Vue from 'vue' import VueRouter from 'vue-router' import List from '../components/List.vue' import CafeView from '../components/CafeView.vue' Vue.use(VueRouter) const routes = [ < path: '/', name: 'List', component: List >, < path: '/cafe/view', name: 'CafeView', component: CafeView >] // . 

Окей, а теперь давайте посмотрим как это выглядит вместе на локальном сервере на url http://localhost:8080/cafe/view:

Вид можно было б ещё больше кастомизировать чтобы выглядело намного красивее. Но пусть будет так с стилями Vuetify по-умолчанию. Теперь давайте также пропишем сыллку на переход на эту страницу в List.vue:

В массив объектов заведений можно было бы ещё добавить отдельное поле url, которое хранило в себе линки на страницу заведения — но поскольку само приложение у нас статичное, то мы сделали именно так. Вывода такой информации на странице заведения — недостаточно. Нужно ещё реализовать компонент вывода меню товаров (еды) заведения. Поэтому для этого мы сейчас создадим отдельный компонент CafeMenu.vue.

Компонент меню заведения

Сначала создайте компонент src/components/Cafe/CafeMenu.vue, и внутри него сначала создаем переменную с массивом внутри которого будут объекты с информацией об товарах:

Рекомендую также добавить другие товары в список. А теперь самое время вывести их в отдельной колонке:

С помощью компонента v-list-item-group мы создали список, внутри которого с помощью v-for в v-list-item вывели список всех товаров. Компонент v-list-item-content используется для того чтобы выводить контент самого элемента списка, в нашем случае мы выводим заголовок (v-list-item-title) и цену (с помощью v-list-item-subtitle). А с помощью v-list-item-action, внутри мы добавили кнопку покупки товара (v-btn), атрибут icon мы добавили чтобы указать что внутри кнопки выводиться только иконка.

Внутри v-icon мы указали иконку от Material Design. Окей, теперь когда я объяснил что к чему — можем подключить данный компонент:

Открываем локальный сервер и смотрим на результат:

Круто, но нашему приложению не хватает менюшки в хедере очень сильно. Поэтому давайте её сейчас добавим.

Создание навигации

Сейчас нам нужно перейти в компонент App.vue и добавить новый компонент v-navigation-drawer:

  export default 

Этот компонент позволяет создавать меню навигации, я специально прописал атрибут left чтобы пустое меню навигации появилось с левой стороны:

Выглядит немного страшновато, но сейчас мы это пофиксим. Добавлю также что v-navigation-drawer является одним из компонентов layout системы Vuetify, и именно он отвечает за меню навигации. Давайте добавим следующий код чтобы это меню срабатывало при клике на иконку в хедере:

Зачем я добавил атрибуты absolute, temporary и v-model в v-navigation-drawer? Во-первых, absolute задает CSS свойство position: absolute; а это позволит сделать так чтобы эта менюшка и на мобайл хорошо отображалась. Во-вторых, temporary задает z-index для навигации — чтобы другие элементы не залазили на неё.

И во-третьих, v-model имеет в себе переменную drawer, которая в зависимости от значения true или false будет показывать меню. К примеру, если переменная drawer равняется в текущую момент значению true — то менюшка будет показываться. Если false, то менюшка будет спрятана. Если вы сейчас перейдете на локальный сервер — то увидите в хедере иконку и при клике на неё будет вылазить наше меню:

Теперь нужно чем-то заполнить меню, для этого создадим сейчас отдельную переменную с пунктами для меню:

А теперь выведем все это внутри v-navigation-drawer:

Готово, теперь если мы откроем меню то увидим следующее:

И вот у нас есть менюшка которая выглядет не прям красиво, но она работает и позволяет уже переходить на страницы. Окей, и что у нас получается? У нас есть простое приложение с выводом заведений, и просмотром этих заведений. Все это довольно таки примитивно — то мы смогли уже сделать что-то с Vuetify.

Итог

Окей, нам получилось сделать просто приложение с неким дизайном с помощью UI фреймворка для Vue.js — Vuetify. Можно было б и больше рассказать — но это сделало статью ещё более длинной, поэтому если кто-то хочет узнать более подробно по данной теме, то может посмотреть моё видео где мы создаём аналогичное приложение — только здесь уже идёт больше объяснений что и как и куда. Кому интересно может заглянуть.

Я лишь скажу что считаю Vuetify лучшим UI фреймворком для Vue.js, и использование его сильно облегчает разработку нового Vue приложения. Ведь тут уже столько всего поддерживает, и нам не приходится изобретать велосипеды.

• javascript framework
• vue js
• vue фреймворк
• vuetify
• vuetify для начинающих
• использование vuetify
• vue
• vuejs

Getting started with Vuetify: Is Vuetify right for you?

With the introduction of new frameworks for visual component encapsulation in web apps, several other needs have been highlighted, including routing, security, SPA and PWA support, internationalization, and, of course, the UI.

Such is true of Vue, which has been widely adopted for developing web applications and hybrid mobile applications. While Vue has a strong focus on component logic and the application as a whole, a developer will need to work with other types of UI libraries or frameworks to add style and design into the pages.

Among the numerous UI frameworks that deal with customizing and facilitating visual components and screen design, several frameworks have adopted the famous Material Design standard. The community has widely accepted this option because it embraces both the desktop and mobile universes with responsiveness, flexibility, and extensibility.

Since most developers working with both paradigms are already familiar with their use, why not join the two together? Therefore, Vuetify was born, combining Vue with the Materialize trend. In this article, we’ll explore Vuetify, learning how to set it up, customizing it, and exploring its features.

You can access the full source code for this article from my GitHub repo. Let’s get started!

• What is Vuetify?
• Installing and setting up Vuetify
• Customizing the Vuetify page
  • Navigation
  • Body: Pricing plans
  • Footer

  What is Vuetify?

  Vuetify complies with the Material Design specification, meaning the core features of both Vue and Material are available by default and can be improved upon by both communities. In addition, Vuetify offers the following features:

  • Compatibility with Vue CLI-3 and RTL
  • Templates for various frameworks, like Cordova, webpack, etc.
  • Internationalization
  • SSR and PWA

  Using Vuetify means you have to embrace Material Design. Therefore, apps intended for the iOS universe are not good candidates for Vuetify. Likewise, if you need a custom design in regards to style as a whole, Vuetify may not suit you, either. As always, you’ll still need to perform a prior, deeper analysis of your project’s needs.

  To better understand how Vuetify works, we’ll create from scratch a simple, responsive, Material-based page with elements from LogRocket’s pricing page, the selection of plans in the Pricing menu:

  Note that the layout of elements is very intuitive, and the card’s template is reminiscent of how Bootstrap works with grids.

  Installing and setting up Vuetify

  Let’s begin by laying out everything we need for the project. First of all, you need to have the latest version of npm installed on your machine. In this tutorial, we’re using Node.js v14.17.4 and npm v6.14.14. To better manage your Node.js versions, you can use nvm.

  To install the Vue CLI globally, first, you need to check if you already have its previous version installed. The package name changed from vue-cli to @vue/cli . Try running the following command to globally uninstall the old package:

  npm uninstall -g vue-cli

  Then, run the following command to install the correct package:

  npm install -g @vue/cli

  Check what version was installed with the following command:

  vue --version

  The command above should print the version as follows:

  @vue/cli 4.5.13

  Next, we’ll scaffold our application and use a series of preset files to make our life easier , like .vue templates files, index.html , and main.js :

  vue create vuetify-logrocket

  The installation guide will ask which JavaScript and lint compiler presets you want to use:

  

  Let’s leave the default options for now and continue by selecting Enter. Wait for the installation to complete, then cd into the directory of the application that was created. Run the command below to add Vuetify to your project:

  cd vuetify-logrocket vue add vuetify

  Wait until the installation takes you to the next selection of presets, this time from Vuetify:

  

  Leave the presets as is and wait for the installation to complete. The image below shows the outputs after adding the plugin:

  

  To start the application, simply run the npm run serve command. Doing so will cause the file changes watcher to start and listen to our edits, automatically updating the pages:

  

  Customizing the Vuetify page

  Before continuing with the tutorial, I’d recommend reading about some of Vuetify’s basic components in the official documentation.

  We won’t use any of the content generated by Vuetify in App.vue , so you can delete all of the contents. We’ll begin by constructing the first part of the screen, including sections for Navigation, Body, and the Footer.

  Navigation

  Navigation will include the toolbar and menus. When viewed via desktop, our app will follow the in-depth menu display pattern, along with a navigation drawer that is common to mobile apps and websites viewed on smartphones with the hamburger icon template.

  The image below shows how our site will display on an iPhone:

  

  First, create a new file called navigation.vue in the /src/components/ folder and add the following code:

  The first tag refers to the definition of a template created in Vue. This tag requires that only one child element be added to the hierarchy; otherwise, we’ll receive an error. To bypass this check, we can add a or any other neutral HTML element that encapsulates the others. For desktop visualization components to coexist, we need both for mobile visualization and .

  Let’s review some other important considerations. We use the app directive in both components so that Vuetify understands that they belong to the application at a more global level , that is, how to resize and readjust them relative to the parent element.

  v-model defines what type of model we’re using , in this case, drawer. This element is important so that the list of menus does not appear as if it’s hanging. The JavaScript code that feeds your items is at the end of the listing.

  The rest of your content represents a loop that iterates over the menu elements, predefined in the menus element. Here, we use the component to iterate and compose the title sub-elements, and .

  In the element, we use the dark directive for Vuetify’s default night style import. The component represents our hamburger icon. It should, of course, only appear when we are viewing the app in mobile mode, which is why all elements of the toolbar receive CSS classes for the Material Design Viewport Breakpoints.

  This is Vuetify’s default mechanism for controlling the display of elements based on the current viewport. See the official dimensions for each Vuetify prefix below:

  

  In the hidden-md-and-up class, the breakpoint sets the viewport size to md for medium devices, and the condition applies the class based on and-up . In other words, it hides the element on the specified breakpoint, md , and larger, lg through xl breakpoints. The rest of the toolbar’s elements are the opposite. They will be hidden when the device viewport is small sm or lower, down .

  For color, Vuetify offers a predefined color palette that you can use via CSS classes. Lastly, the @click property defines that a click on the hamburger icon will trigger the activation of the navigation drawer. Otherwise, the click will not take effect. It’s worth remembering that the effect is a toggle.

  Body

  Now, let’s create our second template, the body, for pricing plans. To do so, create a new file called plans.vue in the same directory and add the following code:

  Vuetify comes with a powerful 12-point grid system that you can use to make web applications. The grid system is built on top of CSS Flexbox, and it provides five media query breakpoints that you can use to target specific screen sizes:

  • XS : Screen sizes less than 600px
  • sm : Screen sizes between 600px and 960px
  • md : Screen sizes between 960px and 1264px
  • lg : Screen sizes between 1264px and 1904px
  • xl : Screen sizes greater than 1264px

  The grid system provides the following components:

  • v-container : Can be used to center content on a page
  • v-row : A wrapper component for v-col . It has a standard gutter of 24px and uses Flexbox to control the layout of its children columns
  • v-col : A content holder that must be a direct child of v-row . v-col allows you to specify column widths across the five breakpoints, and when no column widths are specified, it will render columns with equal width
  • v-spacer : A spacing component that can either be used to fill the available space or make space between child components

  Our container is a simple, horizontally aligned CSS Grid. The first item in the container is a column, . I quickly aligned two texts in the center of the page with the following props:

  • text-cs-center : Aligns text on the horizontal x-axis to the center
  • display-1 : Vuetify typography for a default element size
  • my-5 : Spacing setting for Vuetify margins. Here, m comes from the margin, and y comes from the vertical y-axis. According to the Material Design specification, the scale ranges from 0 to 5
  • font-weight-black : Font weight for Vuetify typography; sets the font weight to 900

  The next layout is a row consisting of three cards. Each card, represented by a , is composed of two main elements, an image and a title.

  

  Over 200k developers use LogRocket to create better digital experiences

  

  Learn more →

  In Vuetify, an image, , is made of components, which work with src and point directly to the image that may be hosted externally.

  To access the files locally, like in our case, you need to expose each of them as data attributes with their respective paths relative to the assets folder; see the script at the end of the listing. You can access the image files in the GitHub project link at the beginning of this article.

  Within each image, we create another container with the fluid prop, which extends the width of the container to be the same as the parent container. Each container will contain a span text with the title of each card and a call-to-action button. Here, we are using more props for subheading and alignment. px-1 stands for a horizontal padding value of 1 out of 5 .

  The component defines the content of the card , usually the title and description, but it may contain other elements like buttons. When viewed in mobile mode, Vuetify will rearrange the cards vertically.

  Footer

  To create the footer, go to the components directory of your project and create the footer.vue file. Add the following code:

    export default

  Our simple footer is composed of the items we discussed previously. For each of the .vue files, we need to define the names of each template, i.e., how they will be recognized externally by other.

  Main page

  For the main page, we’ll use the App.vue file that was already created. Add the following code to it:

  Vue requires the tag, which centralizes the other elements that constitute its application.

  The remainder of the implementation is relatively simple. All we have to do is import the other component files via the import x from y directive and export them as usual. Note that we have to hyphenate each tag before we can use it in the template. Therefore, Vuetify can recognizes how each camel case has been translated.

  Conclusion

  When starting with a new framework, there are many factors one needs to consider. The advantage of Vuetify is that many of the pros and cons have already been absorbed by Vue itself. You have to analyze the real needs of your project. As we mentioned before, Vuetify may not suit your project if you rely on the design itself. But if it does, you will have a productive and extremely powerful tool on hand to create amazing web pages.

  Have you used Vuetify? If yes, how was the experience? Feel free to leave your feedback in the comments . You might help someone with a similar project. Happy coding!

  Experience your Vue apps exactly how a user does

  

  Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/

  LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

  The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

  Modernize how you debug your Vue apps — Start monitoring for free.

  Vuetify – UI библиотека для Vue.js

  В настоящее время web приложения уже трудно представить без сложных элементов управления, таких как интерактивные таблицы с данными, диалоговые окна, выпадающие меню и иерархические деревья. Писать весь этот набор компонентов самостоятельно, для того, чтобы решить бизнес задачи – долго и обременительно. Но к счастью существуют уже готовые решения, которые берут на себя создание такой инфраструктуры. Одно из них – Vuetify.

  Нет больше необходимости добавлять таблицы, формы, меню и диалоговые окна в виде отдельных пакетов в проект, а затем приводить их всех к общему стилю оформления. Компоненты Vuetify уже выполнены в единообразном стиле и очень хорошо настраиваются и расширяются под ваши нужды.

  Прежде всего у библиотеки имеется свой набор стилей оформления, который охватывает каждую мелочь, такую как различного назначения заголовки и сообщения (типографика).

  Есть готовые классы для создания сетки, наподобие тех, что имеются в Twitter Bootstrap. Каждый компонент адаптирован также для мобильных устройств.

  Для построения динамических таблиц с данными есть компонент v-data-table с поддержкой сортировки, пагинации и возможностью встраивать другие компоненты в ячейки таблицы при помощи vue слотов. Не нужно использовать сторонние пакеты типа ratiw/vuetable-2. На мобильных экранах таблица автоматически располагает информацию каждой строки вертикально, т.е. каждая ячейка превращается в отдельную строку. Такой подход становится очень выигрышным в плане UX на маленьких экранах.

  Для создания диалоговых окон имеется компонент v-dialog с внушительным набором опций, и конечно слотами и событиями.

  Рассказывать о каждом компоненте в этой статье не имеет смысла. Вы можете самостоятельно ознакомиться с документацией к Vietify, в которой содержится огромное количество наглядных примеров.

  Чтобы придать своему проекту эстетический вид можно приобрести тему оформления с поддержкой данной библиотеки.

  Я уже успел опробовать Vuetify в реальном проекте и впечатления от него самые положительные. А какими библиотеками создания UI пользуетесь вы?

  Похожие публикации:

  1. Git branch что делает
  2. Pypy как пользоваться
  3. Верно ли что python идеально подходит для написания драйверов устройств
  4. Сколько будет 0 равно 0