Being a component framework, Vuetify will always grow horizontally. Depending on your project, a small package size may be a requirement. The A la carte system enables you to pick and choose which components to import, drastically lowering your build size. New projects created with the Vue CLI plugin have this enabled by default.
Treeshaking работает только с Webpack 4 в production mode. Это автоматически доступно при использовании Vue CLI.
Отслеживание всех компонентов, которые вы используете, может быть настоящим ужасом. vuetify-loader смягчает эту боль, автоматически импортируя все компоненты Vuetify, где вы их используете. Это также сделает code-splitting более эффективным, так как webpack будет загружать только компоненты, необходимые для отображения чанка.
Чтобы воспользоваться компонентами a-la-carte, вы должны импортировать Vuetify из vuetify/lib.
Объект параметров, который вы передаете в качестве второго аргумента Vue.use также может включать components, directives и transitions property.
Хотя это не рекомендуется, вы можете отказаться от использования Vue CLI плагина и вместо этого вручную настроить загрузчик через configure webpack из Vue CLI.
Вы также можете явно установить loader для проектов на основе webpack. Подобно настройке vue.config.js, вы просто добавляете loader в webpack plugins вашего проекта.
Когда вы импортируете из vuetify/lib, также используются базовые стили фреймворка. Каждый компонент индивидуально отвечает за свои стили и будет скомпилирован точно так же. Если вы используете Vue CLI и плагин vue-cli-plugin-vuetify, это делается для вас автоматически, и вы можете пропустить этот раздел. Если вы работаете в проекте, где у вас нет доступа к клиенту, вы можете вручную включить необходимые пакеты.
Для более подробной информации о том, как настроить ваше приложение для обработки SASS, перейдите на страницу темы.
После установки вам необходимо настроить webpack.config.js для разбора файлов .sass. Для получения дополнительной информации о том, как сделать это с fibers, ознакомьтесь с официальной документацией.
Vuetify-loader также позволяет написать собственные пользовательские функции для импорта компонентов вашего проекта. Это может быть сделано как в Vue CLI, так и в webpack проектах.
При использовании vuetify-loader существует несколько сценариев, требующих ручного импорта компонентов.
v-data-iterator может использовать любой компонент через prop. Этот компонент должен быть зарегистрирован глобально:
Динамические компоненты, используемые с <component :is="my-component">, могут быть зарегистрированы локально:
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.
Компоненты могут быть импортированы вручную, если не используется загрузчик Vuetify. Вы также захотите сделать это при использовании динамических компонентов и vuetify-loader, поскольку он анализирует только явное использование. Это обычно происходит при использовании встроенного в Vue <component is="my-component" />. Более подробная информация о динамических компонентах находится в официальной Vue документации.
Вы также можете импортировать компоненты в .vue файлы, как показано ниже.