Introduction à Vue.js et au framework Quasar –

Ces dernières années, nous avons assisté à une prolifération d’outils et de frameworks JavaScript, tels que Angular et React . Je me souviens quand j'ai acheté un livre sur Grunt.js : il était déjà abandonné par les développeurs, qui avaient commencé à utiliser d'autres outils comme Gulp «le système de construction en streaming». Quiconque sautait dans ce train risquait fort de changer de train très rapidement, car webpack était arrivé et les avait tous remplacés.

Mais parmi les frameworks JavaScript, on a assisté à une croissance particulièrement rapide au cours des dernières années: Vue.js . Il a été si populaire que son taux de croissance est devenu explosif par rapport à d’autres dans ce domaine.

Vue est devenue l’un des principaux prétendants en raison de sa courbe d’apprentissage peu dynamique. Il se prête bien à une mise en œuvre progressive. Il a une architecture modulaire à base de composants. Et il a une large utilisation et un écosystème développé d'outils. Si vous souhaitez commencer à utiliser Vue, vous pouvez consulter notre livre Jump Start Vue.js pour vous familiariser avec l'utilisation de Vue dans vos projets.

Comme avec la plupart des technologies, on peut s'y aventurer. Pour maîtriser Vue, apprendre à connaître les termes et les concepts et à se familiariser avec son écosystème d’outils et de blocs de construction est essentiel.

Vue Router est un élément indispensable de toute page Simple de Vue. applications. Il fournit le contrôle de la navigation, le routage imbriqué, le mappage route-vue et de nombreuses autres fonctionnalités.

Vuex est un «modèle + bibliothèque de gestion d'états» pour les applications Vue. C’est comme un magasin de données centralisé nous aidant à gérer l’état de nos applications, à travers tous les composants. La phase de manipulation entre plusieurs parties des applications front-end peut rapidement devenir incontrôlable, d'où la nécessité d'une solution complète. Nous parlons plus de Vuex dans notre Vuex Guide du débutant .

Vue devtools peut faciliter la vie des développeurs. Il vous aide à suivre les composants, l’état et les événements dans nos applications. Pour plus d'informations sur cet outil, reportez-vous au Chapitre 2 de notre livre consacré aux outils Vue.

Vue Cli fournit un ensemble d'outils en ligne de commande pour la création d'applications Vue – prototypage, échafaudage rapide. d’applications JavaScript avec préprocesseurs CSS inclus, ESLint, Babel, prise en charge de Typescript, prise en charge de PWA, etc. Vue CLI – en particulier dans sa dernière incarnation – est un changeur de jeu et présente un petit écosystème qui lui est propre. Le plug-in Vue CLI 3 pour la construction d'applications Electron en est un très bon exemple. Nous y avons également consacré un livre entier, le Guide du débutant de Vue CLI pour que vous puissiez y plonger directement.

Le système de composants Vue (19459005) est un autre des points forts de Vue. Cela nous permet de modulariser nos applications, d'encapsuler des éléments de balisage, de logique et de style et de les réutiliser.

Le composant plug-in Vue Cli de David Desmaisons, aide au développement de composants à publier sur . ] npm .

Si vous souhaitez vous plonger dans ces outils et dans d’autres outils de Vue.js, je vous recommande de consulter Vue.js: Tools & Skills . [19659003] Awesome Vue est également une excellente ressource. C'est une collection / mise à jour approfondie, catégorisée et à jour de toutes les pièces de l'écosystème de Vue et des ressources de Vue.js.

Quasar, le framework Vue que nous couvrons ici, a également Awesome Quasar une excellente page de mise en pension avec de nombreuses ressources utiles.

Quasar

Vue est un framework JavaScript permettant de créer des interfaces utilisateur. Cependant, à lui seul, il ne fournit pas d’éléments d’interface utilisateur, de composants ou de conceptions cohérentes que nous pouvons utiliser. C’est pourquoi, en plus de Vue, de nombreux frameworks d’interface utilisateur ont été conçus pour fournir aux utilisateurs des composants stylés réutilisables. Nous pouvons y voir une approche différente de Bootstrap sur Twitter – uniquement pour Vue.

Si vous souhaitez en savoir plus, je vous recommande de jeter un coup d'œil à « Bibliothèques UI de Vue pour votre prochain projet ”, qui est le chapitre 3 de Vue.js: Tools & Skills . Un concurrent sérieux dans cet espace, que nous n’avons pas abordé, est Vuetify une structure de composant de conception matérielle avec un assez volumineux . Un autre exemple est Quasar .

Quasar est un empilement frontal hautes performances, Material Design 2, conçu pour Vue.js.

Il s'agit d'une licence facile à utiliser mais puissante de MIT, mais puissante. Kit d'interface utilisateur complétant Vue.js pour fournir un ensemble complet d'outils permettant de créer des applications frontales réactives sans avoir à se plonger trop profondément dans l'échafaudage et la configuration.

] Comme nous pouvons le voir dans la das elle contient de nombreux composants d'interface utilisateur, ainsi que des éléments de mise en page et des aides.

Il nous donne trois moyens de démarrer notre application:

• UMD / Standalone permet de commencer petit, en incluant les scripts et les styles dont nous avons besoin à partir d'un CDN. Cette méthode ne repose ni sur VUE CLI ni sur la création d’actifs.
• Quasar CLI prétend être «la fierté du framework Quasar» et constitue le moyen recommandé de créer des applications Quasar. Il peut être utilisé pour construire:
  • SPA (applications / sites Web d'une page)
  • SSR (applications / sites Web rendues côté serveur)
  • PWA (applications Web progressives)
  • applications mobiles (via Cordova)
  • Applications électroniques

  ]

• Plug-in Vue CLI 3

Nous suivrons la recommandation de l'équipe Quasar et utiliserons Quasar CLI.

Amorcer une application Quasar avec Quasar CLI

Avant d'installer Quasar CLI, nous devons nous assurer que nous disposons des bonnes versions du noeud (> = 8 au moment de la rédaction) et npm . (> = 5). Sinon, nous devons l'installer ou le mettre à jour. Ensuite, nous pouvons installer Quasar CLI:

 sudo npm install -g @ quasar / cli

Nous pouvons maintenant l'utiliser pour amorcer nos projets. Quasar dispose d'une documentation complète sur Quasar CLI . Nous allons le parcourir et en discuter les parties les plus pertinentes.

La commande que nous utilisons est la sous-commande quasar +. Juste le quasar listera les commandes pour nous et le quasar --help nous obtiendra l’aide de la sous-commande donnée.

Nous utilisons quasar create pour échafauder un projet de quasar.

Une liste de choix concernant le projet que nous souhaitons démarrer est ensuite présentée.

Une fois le projet échafaudé, nous pouvons entrer [C] dans le répertoire et démarrer un serveur de développement avec quasar dev . Le projet est construit et le navigateur ouvre la page d'index provisoire sur localhost.

Remarque: pour la production, une fois notre projet terminé, nous serions en utilisant le build quasar pour compiler nos ressources.

Le serveur de développement nous fournit Hot Reload, qui conserve l'état dans le navigateur lors des rechargements.

Hot Reload ne se limite pas à l'actualisation. votre navigateur lorsque le code change. Il saute l'actualisation et met à jour votre code à la volée, tout en maintenant l'état de votre application (comme les données de modèle de votre Vue).

Lorsque nous écrivons du code et sauvegardons nos fichiers / composants Vue, ainsi qu'une page rechargée dans le navigateur, la Le terminal shell dans lequel nous avons démarré le serveur dev générera de nombreuses erreurs dans le code. Cette section de Vue.js: Tools & Skills explique assez bien pourquoi.

Une fois que nous avons démarré notre projet, nous obtenons cette structure de répertoires (à l’exception de node_modules [):

Composants Quasar

Les composants Quasar ne sont que des composants Vue. Vous en trouverez une assez bonne explication dans Jump Start Vue.js au chapitre 3 sur « Components », ainsi que dans Guide du débutant pour l'utilisation de composants dans Vue . Lorsque nous avons démarré notre projet, quasar a créé un fichier quasar.conf.js dans le dossier racine contenant tous nos paramètres de configuration.

. ]

Ici, nous pouvons modifier la configuration de notre projet, vous pouvez ajouter ou supprimer des dépendances, des composants quasar, etc. Nous pouvons voir que, par défaut, quasar inclut des composants tels que QLayout QPage et QPageContainer qui concernent la mise en forme CSS. Vous pouvez en savoir plus à ce sujet ici . Une mise en garde, cependant: lorsque vous utilisez ces composants, vous ne devez pas utiliser la propriété css margin cela casserait la mise en page. Quasar fournit également un constructeur de mise en page – une petite application Web qui peut nous aider à construire via l'interface utilisateur Web, puis à exporter et utiliser notre mise en page.

Quasar a créé router / routes.js fichier avec une route d'index, spécifiant la disposition et la page du chemin racine:

 const routes = [
  {
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') }
    ]
  }
]

// Toujours laisser ceci en dernier
if (process.env.MODE! == 'ssr') {
  routes.push ({
    chemin: '*',
    composant: () => import ('pages / Error404.vue')
  })
}

exporter les itinéraires par défaut

Donc, pour ajouter des composants ou modifier la page d'index, nous allons modifier les fichiers MyLayout.vue ou Index.vue référencés à la racine ( / ) route.

Le générateur quasar crée par défaut crée un projet de version Quasar 0.17 et non la dernière version majeure, toujours en version bêta. Apparemment, la nouvelle version utilise une nomenclature différente pour les composants – tels que QLayout au lieu de QLayoutHeader – il faut donc en être conscient.

Si nous voulons utiliser la nouvelle version beta , nous aurons besoin d’échafauder notre projet comme ceci:
quasar create -b dev . Gardez à l'esprit que le générateur que nous venons de mentionner est également destiné à la nouvelle version bêta.

Le générateur produira ensuite un balisage que nous pourrons exporter, comme suit:

Nous allons maintenant remplacer le contenu de src / layouts / MyLayout.vue par le contenu ci-dessus et ajouter le composant QAvatar à quasar.conf.js Fichier .

Une fois ces modifications sauvegardées, vous devez voir le résultat dans notre navigateur.

. 19659003] Nous allons maintenant ajouter un composant de table quasar à la zone centrale en ajoutant du code à src / pages / Index.vue . Nous allons simplement remplacer le logo Quasar img tag:

… avec le code de table:

Nous ajouterons également ce qui suit à l’objet d’exportation par défaut de la balise

Remarque: lorsque nous compilons ceci, nous pouvons avoir des erreurs d'indentation, qui ne devraient pas être trop difficiles à résoudre.

Lorsque nous naviguons vers http: // localhost: 8080 / # / editor nous devrions voir l’éditeur:

Il s’agit d’un WYSIWYG éditeur - et il dispose d’autres éléments à disposition pour sa barre d'outils.

En réalité, nous ajouterions axios à notre application - une bibliothèque recommandée pour les demandes Ajax - et Vuex pour le traitement des données entre autres utilitaires Quasar.

Conclusion

Quasar fournit beaucoup plus de composants, fonctionnalités, styles et utilitaires que ce que nous avons pu couvrir dans ce didacticiel. C’est un cadre complet pour la création d’applications d’une seule page, mais il n’est pas limité à cela.

Il s’agit d’une simple introduction, et en aucun cas d’une présentation exhaustive. Mais nous avons couvert la partie qui constitue le plus souvent le plus gros obstacle à l’adoption: comprendre le processus de montage et d’échafaudage. Avec le reste de la littérature sur Vue.js dans notre bibliothèque et une excellente documentation sur le site Web de Quasar, ce tutoriel devrait vous permettre de passer directement à la réalisation d'applications Quasar réelles.

Tonino est un développeur Web et un consultant en informatique qui utilise le code source ouvert depuis plus de 10 ans. Il est également un passionné de crypto, un fan de Linux et un libertaire modéré.