Commencez avec Vuetify, le framework Vue.js le plus populaire pour la création d'applications riches et rapides.
Le CLI Vue est la prochaine génération d'outil cli fait pour écarter la complexité de construire une application. Quand vous démarrez votre application avec le CLI Vue vous avez aussi la possibilité d'obtenir les mises à jours webpack et changements de configurations officiels, comme avec les mise à jours de Vuetify sans un ardue processus d'amélioration.
Pour plus d'information sur l'utilisation du CLI Vue, visitez la documentation officiel
Si vous n'avez pas encore créé un nouveau projet Vue.js en utilisant Vue CLI, vous pouvez le faire en tapant :
Maintenant que votre projet est créé, vous pouvez ajouter le Vuetify Vue CLI package en utilisant le cli.
Vuetify peut aussi être installé en utilisant Vue UI, une nouvelle application pour le CLI Vue Assurez vous d'avoir la dernière version du CLI Vue 3 d'installer puis à partir de votre console tapez:
Ce dernier démarrera l'interface utilisateur Vue et ouvrira une nouvelle fenêtre dans votre navigateur. Sur le côté gauche de votre écran, cliquez sur Plugins. Une fois dessus, effectuez une recherche pour Vuetify dans le champ de saisie.
Installation du plugin Vuetify
Vuetify peut-être ajouté en installant le module Nuxt Vuetify.
Une fois installé, mettez à jour votre fichier nuxt.config.js pour ajouter le module Vuetify dans le build.
Plus d'informations sur l'installation de Nuxt peuvent être trouvées sur la document officielle.
Pour installer Vuetify dans un projet Webpack, vous devez ajouter quelques dépendances:
Une fois installé, localisez votre fichier webpack.config.js et copiez le snippet ci-dessous dans le tableau rules . Si vous avez une règle existante sass configurée, vous pouvez avoir besoin d'appliquer certaines ou toutes les modifications ci-dessous. Si vous cherchez à utiliser le vuetify-loader pour le treeshaking, assurez-vous de posséder une version >=4 de Webpack. Vous pouvez trouver plus d'informations sur la configuration avec webpack sur la page A-la-carte.
Créer un fichier de plugin pour Vuetify, src/plugins/vuetify.js avec le contenu ci-dessous :
Si vous utilisez vuetify-loader utilisez le contenu ci-dessous:
Naviguez jusqu'au point d'entrée principal où vous instanciez votre instance Vue et passez l'objet Vuetify en tant qu'option.
Vuetify utilise Google's Roboto font et Material Design Icons. La façon la plus simple d'installer ces derniers est d'inclure leurs CDN dans votre index.html principal.
Pour tester l'utilisation de Vuetify.js sans installer un modèle depuis Vue CLI, copiez le code ci-dessous dans votre index.html. Ceci tirera la dernière version de Vue et Vuetify, vous permettant de commencer à jouer avec des composants. Vous pouvez également utiliser le Vuetify starter sur codepen. Bien que non recommandé, si vous devez utiliser les paquets cdn dans un environnement production, il est recommandé d'utiliser des versions fixes de vos assets. Pour plus d'informations sur la façon de faire cela, naviguez sur le site web jsdelivr.
Pour que votre application fonctionne correctement, vous devez l'envelopper dans un composant v-app. Voir la page du composant Application pour plus d'informations.
To use Vuetify with Electron, add the electron-builder plugin via Vue CLI.
Si vous créez une nouvelle application avec Vue CLI, vous avez la possibilité de sélectionner Application Web Progressive (PWA) Support ddans la première ligne de commande après le lancement de vue create mon-app. Ce paquet peut également être installé dans les projets existants Vue CLI en entrant la commande suivante :
To use Vuetify with Cordova, add the Cordova plugin via Vue CLI:
Pour utiliser Vuetify avec Capacitor, ajoutez Capacitor via le CLI Vue:
There are 2 ways we can use Vuetify with default vuepress theme. Either by registering vuetify as a plugin in vuepress .vuepress/enhanceApp.js file (code sample below), or by using vuetify directly from CDN:
Prêt pour plus ? Continuez la lecture avec :