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

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

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

Chrome
Поддерживается
Firefox
Поддерживается
Edge
Поддерживается
Safari 10+
Поддерживается
IE11 / Safari 9
Поддержка с polyfill
IE9 / IE10
Не поддерживается

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

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

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

Tip: If you already have Vue CLI installed, you can check if you are on the latest version by typing vue --version from your terminal.

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

This will provide you with a set of options for customizing your installation. The default preset has a-la-carte already enabled for you.

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

Установка с Vue UI

Vuetify can also be installed using Vue UI, the new visual application for @vue/cli. Ensure that you have the latest version of Vue CLI installed, then from your terminal type:

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

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

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

Настройка Vuetify

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

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

For a detailed explanation of how to get npm running in your environment, check out the official npm documentation. Alternatively, if you wish to use yarn, you can find more information on the official yarn documentation. Once setup, you can run either command from the cli.

Once Vuetify has been installed, create a folder within you src directory called plugins. Inside, add a vuetify.js file. This is where we will handle all of our bootstrapping and setup of Vuetify for your project.

vuetify-loader installation

There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.

If there is a reason you are unable to utilize the vue-cli-plugin package, you can manually install the vuetify-loader through your vue.config.js or webpack config. For more information on manual installation, navigate to the A-la-carte page.

A-la-carte installation

You can also manually import individual components without the need for the vuetify-loader. This is considered manual A-la-carte.

Full installation

The last method will import and setup all of Vuetify's features and styles. As stated above, it is still recommended that you utilize the vuetify-loader if at all possible. For this install, you will need to manually import the Vuetify styles. This is also the process used when bootstrapping Vuetify through a browser as opposed to compiling. You can observe the browser installation in our cdn quickstart.

Webpack installation

When using webpack, you have the ability to setup your application with either of the above options (Full or A-la-carte install). However, you will need to configure add a webpack rule (or modify an existing one) for sass files. You can start by installing the necessary dependencies:

Once installed, locate your webpack.config.js file and copy the snippet below into the rules array. If you have an existing sass rule configured, you may need to apply some or all of the changes below. If you are you looking to utilize the vuetify-loader as well, you can find more information on setting it up with webpack on the A-la-carte page.

Bootstrapping the Vuetify Object

Once you have setup your initial Vuetify options in your src/plugins/vuetify.js file, you must then pass that object into your main Vue instance options. This install process is similar to vue-router and vuex

Font Installation

Vuetify uses the Google Roboto font per the Material Design Specification. The easiest way to use this font is by add a <link> element in the <head> of your main index.html.

You can also asynchronously load the fonts by using the webfontloader.

MDI Iconfont

Vuetify uses Material Design Icons as its default iconfont. The simplest way to install it is through npm.

Once the package is installed, simply import it into the vuetify.js file in your plugins folder.

For more information on different support iconfonts and advanced implementations, navigate to the Icons page.

CDN usage

To test using Vuetify.js without installing a template from Vue CLI, copy the code below into your index.html. This will pull the latest version of Vue and Vuetify, allowing you to start playing with components. You can also use the Vuetify starter on codepen. While not recommended, if you need to utilize the cdn packages in a production environment, it is recommended that you scope the versions of your assets. For more information on how to do this, navigate to the jsdelivr website.

Поддержка IE11 и Safari 9

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

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

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

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

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

Edit this page | language on Github
Vuetify
МагазинFor Enterprise