Обзор
Будучи составной частью, Vuetify будет всегда расти. В зависимости от вашего проекта может потребоваться небольшой размер пакета. Система A la carte позволяет вам выбирать, какие компоненты необходимо импортировать, сильно уменьшить размер сборки. Если у вас уже установлен шаблон a-la-carte, вы можете перейти к руководству.
Импорт компонентов
Tree shaking only works with webpack 4 in production mode
Пакет transform-import не нужен для использования компонентов a-la-carte, но упрощает процесс их импорта и поэтому рекомендуется. Это позволяет использовать более сжатый синтаксис при импорте компонентов.
The options object that you pass as the second argument to Vue.use can also include both a directives and a transitions property.
Если вы не используете пакет transform-import, вам нужно будет импортировать каждый компонент следующим образом:
Требуемые стили
Чтобы получить все необходимые стили, нам нужно импортировать их в stylus. Для того, чтобы webpack справился с этим, вам нужно будет установить stylus и stylus-loader из npm.
Теперь вам нужно будет подключить stylus в точки входа вашего приложения. Это то же место, где вы импортируете Vue и Vuetify (обычно main.js или app.js). Имейте в виду, что это требование в главном App.vue может вызвать медленное время загрузки, поскольку оно повторно обрабатывается при создании обновлений.
For a more detailed explanation on how to setup your application to handle stylus, please navigate to the theme page.
vuetify-loader
Keeping track of all the components you're using can be a real chore, so we wrote a webpack loader to help you. vuetify-loader will automatically import all the vuetify components you use, where you use them. This will also make code-splitting more effective, as webpack will only load the components required for that chunk to be displayed.
Now any Vuetify component used in a template will be automatically added to an in-component import like above.
Limitations
When using the vuetify-loader, there are a few scenarios which will require manual importing of components.
Dynamic components
v-data-iterator can use any component via the content-tag prop. This component must be registered globally:
Dynamic components used with <component :is=""> can be registered locally:
Functional components
Functional components are inlined at runtime by vue, and cannot have a components property in their options. Any vuetify components used in a custom functional component must either be registered globally (recommended), or locally wherever the custom component is used.