Начните работу с Vuetify, самого популярного в мире фреймворка Vue.js для создания многофункциональных, невероятно быстрых приложений.
Vue CLI - это инструмент следующего поколения, созданный для того, чтобы абстрагироваться от сложностей построения приложения. При запуске приложения с помощью Vue CLI вы также сможете получать официальные обновления webpack и изменения конфигурации, а также сделает процесс обновления Vuetify менее трудоёмким.
Для получения информации о том, как использовать Vue CLI, посетите официальную документацию
Если вы еще не создали новый 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.
Чтобы ваше приложение работало правильно, вы должны обернуть его в компоненте v-app. Смотрите страницу компонента Application для получения дополнительной информации.
Чтобы использовать Vuetify с Electron, добавьте плагин electron-builder через Vue CLI.
Если вы создаете новое приложение с Vue CLI, вы можете выбрать Progressive Web App (PWA) Support в первом запросе после инициализации vue create my-app. Этот пакет также может быть установлен в существующие Vue CLI проекты, введя следующую команду:
Чтобы использовать Vuetify с Corodova, добавьте Cordova через Vue CLI:
Чтобы использовать Vuetify с Capacitor, добавьте плагин Capacitor через Vue CLI:
There are 2 ways we can use Vuetify with default vuepress theme. Either by registering vuetify as a plugin in vuepress .vuepress/enhanceApp.js file (code sample below), or by using vuetify directly from CDN:
Готовы к большему? Продолжить чтение с: