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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы протестировать Vuetify.js без установки шаблона из Vue CLI, скопируйте приведённый ниже код в свой index.html. Это подключит последнюю версию Vue и Vuetify, что позволит вам поиграть с компонентами. Вы также можете использовать Vuetify starter в codepen.

В каталоге проекта установите babel-polyfill и импортируйте его в свою основную точку входа приложения:

Из-за ограниченной поддержки Internet Explorer тегов <template>, вы должны отправить полностью скомпилированные элементы dom в браузер. Это можно сделать, либо заранее создав код Vue, либо создав вспомогательные компоненты для замены элементов dom. Например, если отправлено непосредственно в IE, это не будет выполнено:

Рекомендуется использовать babel-preset-env с соответствующим полифиллом, чтобы быть уверенным, что только нужные полифиллы будут импортированы в приложение. Чтобы узнать больше о babel-present-env, читайте документацию

После установки, добавьте настройки в .babelrc или babel.config.js

К сожалению, vue-cli-3 не добавляет совместимость с IE11 автоматически, поэтому вы можете столкнуться с некоторыми ошибками (такими как Symbol is not defined). Чтобы исправить эти проблемы, нужно вручную добавить параметр transpileDependencies в vue.config.js

Из-за ограниченной поддержки тегов <template> в Internet Explorer, вы должны отправлять в браузер полностью скомпилированные элементы DOM. Это можно сделать, собирая код Vue заранее или создавая компоненты для замены элементов DOM. Например, при непосредственном запуске в IE, этот код вызовет ошибку: