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 will only work with Webpack 4 in production mode. This is automatic when using Vue CLI.
Garder une trace de tous les composants que vous utilisez peut être une vraie corvée. Le vuetify-loader atténue cette douleur en important automatiquement tous les composants Vuetify que vous utilisez, là où vous les utilisez. Cela rendra également le fractionnement de code plus efficace, car webpack ne chargera que les composants nécessaires à l'affichage de ce bloc.
Pour profiter des composants a-la-carte, vous devez importer Vuetify à partir de vuetify/lib.
L'objet options que vous transmettez comme second argument à Vue.use peut également inclure une propriété components, directives et transitions.
While it is not recommended, you can opt out of using the Vue CLI plugin and instead manually configure the loader via the configure webpack option from Vue CLI.
Vous pouvez également installer explicitement le loader pour les projets basés sur webpack. Similaire à la configuration vue.config.js, vous n'avez qu'à ajouter le loader aux plugins webpack de votre projet.
When you import from vuetify/lib the baseline framework styles are pulled in as well. Each component is individually responsible for their styles and will be compiled just the same. If you are using Vue CLI and the vue-cli-plugin-vuetify plugin, this is done for you automatically and you can skip this section. If you are working in a project where you do not have access to the cli, you can manually included the required packages.
Pour une explication plus détaillée sur la manière de configurer votre application pour gérer SASS, naviguez vers theme page.
Après l'installation, vous devrez toujours configurer votre fichier webpack.config.js pour parser les fichiers .sass. Pour plus d'informations sur la façon de le faire avec fibers, regardez la documentation officielle.
The vuetify-loader also allows you to write your own custom match functions to import your own project's components as well. This can be done in both Vue CLI and webpack projects.
Lors de l'utilisation de vuetify-loader, il y a quelques scénarios où une importation manuelle des composants sera nécessaire.
v-data-iterator peut utiliser n’importe quel composant via la propriété content-tag. Ce composant doit être enregistré globally :
Les composants dynamiques utilisés avec <component :is="my-component"> peuvent être enregistrés locally :
Les composants fonctionnels sont importés par Vue en ligne (inline) lors de l'exécution, et ne peuvent pas avoir de propriété components dans leurs options. Tous les composants Vuetify utilisés dans un composant fonctionnel personnalisé doivent être soit enregistrés globalement (recommandé), soit localement, quel que soit le type d'utilisation du composant personnalisé.
Les composants peuvent être importés manuellement lorsque vous n'utilisez pas vuetify-loader. Vous devrez également le faire lorsque vous utilisez des composants dynamiques et le vuetify-loader car il ne parse que les utilisations explicites. Cela se produit généralement lorsque vous utilisez le <component is="my-component" /> fournit par Vue. Plus d'informations sur les composants dynamiques sont dans la documentation Vue officielle.
Vous pouvez également importer des composants dans les fichiers .vue, comme indiqué ci-dessous.