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 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
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
. 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:
Title
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.
… 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.
Source link