Un tutoriel Vue.js pour les développeurs débutants: apprenez les bases et utilisez cette structure Vue de démarrage

Tutoriel Vue.js pour les développeurs débutants


Chaque fois que vous commencez à utiliser de nouvelles technologies dans votre flux de développement, vous pourriez vous sentir au moins un peu intimidé. Surtout quand il y a une myriade de packages npm dans la nature. Mélanger et assortir des choses peut parfois prendre beaucoup de temps et d’efforts, et est généralement frustrant. C’est là que le tutoriel Vue.js suivant pour les développeurs débutants entre en jeu.

Qu’est-ce que Vue.js? Pourquoi devriez-vous vous en soucier?

Vue.js ou Vue pour faire court est un cadre JavaScript pour la construction d’interfaces utilisateur. Comparé à d’autres cadres, comme Angular ou React, Vue est plus accessible et n’a pas une courbe d’apprentissage aussi abrupte.

Vue est également modulaire et vous permettra de diviser votre code en composants réutilisables. Chacun d’eux ayant son propre balisage HTML, CSS et code JavaScript.

Quelle est la portée de ce tutoriel Vue.js?

Le but de ce court tutoriel Vue.js est de vous fournir des échafaudages sur lesquels vous pouvez construire et expérimenter Vue. Nous allons jeter un œil à la configuration de base d’une application Vue dans le tableau de bord WordPress.

(Remarque; Nous ne vous apprendrons pas Vue en soi dans ce guide, mais vous pouvez continuer et en savoir plus sur le cadre à partir du guide officiel après avoir configuré le projet ici – sur lequel vous pouvez continuer à expérimenter une fois que nous aurons terminé. De plus, nous recommandons certaines des bibliothèques de composants Vue UI les plus intéressantes qui rendent le processus de développement plus efficace.)

Ce que nous allons faire, c’est utiliser un modèle prédéfini pour les plugins WordPress utilisant Vue. Vous pouvez le trouver dans le référentiel GitHub suivant si vous souhaitez approfondir: https://github.com/abaicus/vue-wp-bootstrap.

Tutoriel Vue.js: Prérequis

Il y a quelques choses que vous devriez déjà avoir configurées sur votre ordinateur pour continuer à suivre ce guide:

Tout d’abord, vous allez avoir besoin d’une pile LAMP – vous pouvez utiliser XAMPP sur Windows ou Mac, ou Local by Flywheel sur Mac, puis configurez-vous une nouvelle installation WordPress locale.

Assurez-vous d’avoir Gestionnaire de packages NodeJS (npm) installé sur votre machine. Vous devrez également installer deux autres packages via le terminal – la CLI Vue et l’outil d’initialisation du modèle Vue. Ainsi:

$ npm install -g @ vue / cli
$ npm install -g @ vue / cli-init

Après avoir installé ces deux dépendances, vous devez remplacer le répertoire actif par le répertoire wp-content / plugins de votre instance WordPress locale, puis y exécuter la commande suivante:

$ vue init abaicus / vue-wp-bootstrap my-vue-dashboard-plugin

Ensuite, vous serez invité à répondre à certaines questions concernant la configuration de votre projet.

Pour l’invite Build, allez-y et choisissez la première option pour l’instant "Runtime + Compiler: recommandé pour la plupart des utilisateurs".

Vous pouvez activer le linter ESLint si vous le souhaitez. Il détectera toutes les erreurs de peluchage dans votre projet, mais vous n’avez pas nécessairement à vous en préoccuper pour le moment.

Commit Lint et Pre-Commit Hooks sont destinés à vérifier vos messages de commit et le code avant d’envoyer un commit à GitHub – pour garder tout bien rangé et bien formaté.

Vous vous retrouverez avec un terminal ressemblant plus ou moins à ceci après avoir terminé:

Vous pouvez continuer et suivre les instructions à l’écran. Remplacez le répertoire par le répertoire du plugin nouvellement généré et exécutez les commandes affichées dans l’invite du terminal. Cela permettra à votre application d’être opérationnelle, en attente de modifications dans votre code et de transpiler le code Vue en JavaScript.

Qu’est ce que ça fait?

Pas tant. Ceci est juste une application de base qui affiche certaines données du backend. Pas beaucoup de Vue sous le capot. Vous pouvez accéder à la page Tableau de bord des plugins et l’activer. Cela va ajouter une nouvelle page dans votre menu Admin. Lorsque vous y accédez, vous allez trouver une page de tableau de bord avec deux chaînes:

La structure d’échafaudage du plugin

Jetons un œil à la structure des fichiers du plugin nouvellement généré. Nous allons ignorer la plupart des fichiers de configuration de ce tutoriel Vue.js afin de nous concentrer sur la structure de l’application:

Tout d’abord, nous avons le fichier plugin.php, qui est le point d’entrée du plugin réel. Ici, nous avons le principal Brancher classe. C’est là que les principaux composants de l’application sont inclus et exécutés.

Ensuite, il y a le fichier package.json où toutes les dépendances et un tas d’autres informations sur le projet sont définies. La partie qui pourrait vous intéresser vit sous le "scripts" champ. Là, vous avez toutes les commandes que vous pouvez exécuter avec le préfixe d’exécution npm. Les plus importants, pour l’instant, devraient être npm run dev (qui construit l’application pour le développement) et npm run build (que vous devez exécuter une fois que vous êtes prêt à déployer votre application pour la production). Les autres commandes sont adjacentes à ces deux ou font d’autres choses dont vous ne devriez pas avoir à vous soucier en ce moment.

À l’intérieur du répertoire includes, il y a trois fichiers:

  • La classe rest.php ne fait rien pour le moment, mais vous avez déjà une structure pour ajouter vos routes RestAPI
  • La classe assets.php gère la mise en file d’attente de style et de script. Ici, le fichier JavaScript est localisé pour transmettre les données de départ de PHP à notre application Vue. Pour le moment, il n’y a que deux SMS envoyés, mais vous pouvez inclure tout ce que vous voulez.
  • Le fichier admin.php est celui qui s’occupe d’ajouter une nouvelle page dans le tableau de bord et de rendre la page du plugin réelle. Vous remarquerez que l’application elle-même est rendue comme deux balises vides à l’intérieur de la fonction plugin_page (). C’est parce que le JavaScript gérera le rendu réel de l’application après son chargement.

Dans le répertoire des actifs, vous trouverez quatre autres répertoires:

  • Le répertoire src – les fichiers source de notre application Vue, dont nous allons parler plus tard.
  • Le répertoire scss – les fichiers de style SCSS à partir desquels nous générons la feuille de style CSS.
  • Le répertoire js – le code transpilé qui est généré à partir de nos fichiers dans le répertoire src.
  • Le répertoire css – le style compilé à partir des fichiers SCSS.

Le répertoire src et les fichiers de modèles Vue

Dans ce répertoire, il y a deux fichiers: main.js et App.vue. Le fichier main.js est le point d’entrée de l’application. Il attache le composant d’application Vue à l’élément DOM avec l’ID correspondant.

/ * jshint esversion: 6 * /
importer Vue depuis ‘vue’
importer l’application depuis ‘./App.vue’

window.addEventListener (‘load’, function () {
nouvelle Vue ({// eslint-disable-line no-new
el: ‘# mvdp-app’,
composants: {App},
rendu: (h) => h (application)
})
})

Le balisage d’application réel se trouve dans le modèle App.vue:

/ * jshint esversion: 6 * /

{{this.strings.title}}

{{this.strings.description}}

/ * global MVDP * /
exporter par défaut {
Les données () {
revenir {
chaînes: MVDP.strings
}
},
nom: ‘App.vue’
}

Vous pouvez voir à l’intérieur de l’extrait ci-dessus que nous utilisons les chaînes que nous avons localisées dans la classe Assets. L’une des grandes fonctionnalités de Vue est que le code du composant est soigneusement organisé en modèle, script et style, ce qui facilite la compréhension de la structure.

Voilà, vous avez maintenant un point de départ solide pour tout ce que vous souhaitez développer avec Vue.js! J’espère que ce tutoriel Vue.js a été utile.

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Mise en page, présentation et édition par Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map