Магазин

Для бизнеса

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

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

Если вы еще не создали новый Vue.js проект с помощью Vue CLI, то вы можете сделать это, командой:

Теперь, когда у вас есть созданный проект, вы можете добавить Vuetify Vue CLI пакет с помощью cli.

Vuetify также может быть установлен с помощью Vue UI, нового визуального приложения для Vue CLI. Убедитесь, что у вас установлена последняя версия Vue CLI, затем в вашем терминале введите команду:

Это запустит Vue User Interface и откроет новое окно в вашем браузере. В левой части экрана нажмите на Плагины. После навигации, найдите Vuetify в поле ввода.

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

Vuetify можно добавить установив Nuxt Vuetify module.

После установки обновите ваш файл nuxt.config.js, чтобы включить модуль Vuetify в сборку.

Дополнительную информацию об установке Nuxt можно найти в официальной документации.

Для установки Vuetify в проект Webpack необходимо добавить несколько зависимостей:

После установки, найдите ваш файл webpack.config.js и скопируйте пример ниже, в массив rules. Если у вас есть существующее правило sass, вы можете применить некоторые или все изменения ниже. Если вы хотите использовать vuetify-loader для treeshaking, убедитесь, что вы используете версию >=4 для Webpack. Вы можете найти дополнительную информацию по настройке веб-пака на странице A-la-carte.

Создайте файл плагина для Vuetify, src/plugins/vuetify.js с содержимым ниже:

При использовании vuetify-loader используйте содержимое ниже:

Перейдите в главную точку входа, где вы создаете экземпляр Vue и передаете объект Vuetify в качестве опции.

Vuetify использует шрифт Google Roboto и иконки в стиле Material Design. Самый простой способ установить их в ваш index.html через CDN.

Чтобы протестировать использование Vuetify.js без установки шаблона из Vue CLI, скопируйте код ниже в ваш index.html. Будет использована последняя версия Vue и Vuetify, позволяющая начать играть с компонентами. Вы также можете использовать Vuetify starter на codepen. Не рекомендуется, но если вам нужно использовать пакеты cdn в среде production рекомендуем вам зафиксировать определенную версию пакетов. Для получения дополнительной информации о том, как это сделать, перейдите на сайт jsdelivr.

Чтобы использовать Vuetify с Electron, добавьте плагин electron-builder через Vue CLI.

Если вы создаете новое приложение с Vue CLI, вы можете выбрать Progressive Web App (PWA) Support в первом запросе после инициализации vue create my-app. Этот пакет также может быть установлен в существующие Vue CLI проекты, введя следующую команду:

To use Vuetify with Cordova, add the Cordova plugin via Vue CLI:

Чтобы использовать Vuetify с Capacitor, добавьте плагин Capacitor через Vue CLI:

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!