Création d’un composant Vue.js personnalisé et intégration avec AEM

Présentation d’AEM et de vue.js

Adobe Experience Manager (AEM) est un puissant système de gestion de contenu qui permet une création et une gestion transparentes de contenu. D’autre part, vue.js est un framework JavaScript progressif qui simplifie le développement front-end. L’intégration d’AEM avec vue.js peut améliorer l’expérience utilisateur et rationaliser les processus de développement.

Avantages de l’intégration d’AEM avec vue.js

• Performances et vitesse améliorées
• Interface utilisateur et interactivité améliorées
• Structure et organisation de code cohérentes

Création d’un projet et d’un composant Vue.Js

Conditions préalables:

• La version js du nœud système doit être supérieure à 11.

Étape 1

• Accédez au répertoire aem-guides-wknd et créez un projet voir l’application en suivant les étapes ci-dessous.
  1. Installer Node.js – Avant de commencer, assurez-vous que Node.js est installé sur votre système. Vous pouvez télécharger la version spécifiée sur le site officiel de Node.js (https://nodejs.org/).

2. Installez Vue CLI – Vue CLI est un outil de ligne de commande qui facilite la création et la configuration de projets Vue. Pour installer Vue CLI, ouvrez un terminal et exécutez la commande suivante : npm install -g @vue/cli.
   Cette commande installera Vue CLI globalement sur votre système, vous permettant d’accéder à l’interface de ligne de commande Vue CLI à partir de n’importe quel répertoire.
3. Créer un nouveau projet – Une fois que Vue CLI est installé, vous êtes prêt à créer un nouveau projet Vue. Suivez ces étapes:
   1. Ouvrez le répertoire aem-guides-wknd.
   2. Exécutez la commande suivante pour créer un nouveau projet Vue :
      

      vue create vue-app

   3. Une liste de configurations prédéfinies vous sera présentée. Vous pouvez choisir parmi les options par défaut ou sélectionner une configuration manuelle pour personnaliser les fonctionnalités de votre projet.
   4. Une fois que vous avez sélectionné une configuration, Vue CLI commencera à installer les dépendances nécessaires et générera la structure de base de votre projet.

• Après cela, votre projet nommé « vue-app » sera créé et la hiérarchie sera comme ceci.

Création et intégration de composants Vuejs dans AEM

Objectif : Création de trois composants indépendants, à savoir les éléments cochés, la révision des éléments et le composant action.checkeditems affichera des listes d’éléments avec un bouton ajouter/supprimer. Après avoir cliqué sur Ajouter, il sera ajouté au composant d’évaluation des articles, le bouton sera remplacé par Supprimer et s’il est éligible à une offre, il sera ajouté au composant itemsaction.

Création de composants

Étape 1

• Créez trois composants nommés ‘Checkitems.js‘, »Itemreview.js« , »Itemsaction.js » dans le dossier des composants.

Nous allons créer new vue pour instancier le composant, puis à l’intérieur du données property initialise toutes les propriétés,monté Le hook est souvent utilisé pour effectuer une logique d’initialisation unique, telle que la récupération de données à partir d’une API ou la configuration d’écouteurs d’événements.méthodes sera utilisé pour toutes les actions dom liées au composant.

Ci-joint quelques captures d’écran ci-dessous : –

• Pour communiquer entre les composants, je vais créer un dossier partagé et créer un ÉvénementBus,js fichier pour envoyer/recevoir des données.

• Créez un dossier CSS et ajoutez un fichier CSS respectif pour chaque composant, c’est-à-dire liste de contrôle.css,
  Menusreview.css,itemactions.css.

• Créer trois composants AEM liste de contrôleitems.html,itemreview.html,itemaction.html à l’intérieur ui.apps/src/main/content/jcr_root/apps/wknd/components. Parallèlement à cela, écrivez le HTML en utilisant vue.v-pour permet d’afficher la liste des éléments.@Cliquez sur est utilisé pour effectuer l’événement de clic. Ci-joint quelques captures d’écran ci-dessous.

• Après la création, importez le composant dans le fichier main.js de vue. Supprimez le fichier App.js dans le répertoire.checkItems,Action d’objets,articlesrevue sont les classes parentes de chaque composant. Nous allons l’intégrer comme ceci. Ci-joint une capture d’écran ci-dessous :
  

Construction et intégration de composants

Nous allons créer l’application vue par une configuration Webpack personnalisée. Pour que le fichier de construction final soit stocké dans le dossier ui.apps.

• Créer un webpack.config.js et clientlib.config.js fichier dans vue-app et fournissez le copywebpackplugin pour copier le fichier de construction à partir de dist/js/main.js,dist/css/main.css à ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/vue et ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-base/js et dossier /css.
  
  webpack.config.js et clientlib.config.js

• Dans package.json, modifiez la construction à l’intérieur des scripts comme ci-dessous
  « build »: « webpack && clientlib –verbeux » .
• Faire installation npm et npm install –save-dev webpack webpack-cli webpack-dev-server pour télécharger toutes les dépendances du webpack nécessaires.
• Puis cours npm exécuter la construction commande dans le répertoire vue-app. Donc le fichier de build main.js et main.css sera créé dans le dossier dist de l’application vue. Parallèlement à cela, il sera automatiquement copié dans le dossier clientlib et le fichier _content.xml sera créé automatiquement. Ci-joint une capture d’écran ci-dessous :

• Dans js.txt et css.txt, écrivez #base=js main.js et #base=css main.css.
  

Déploiement de l’intégration AEM et Vue.js

• Accédez au répertoire racine et exécutez la commande mvn installation propre -PautoInstallSinglePackage -Pclassic.
• Ouvrez le navigateur et entrez l’URL http://localhost:4502/aem/start.html
• Connectez-vous par identifiant et mot de passe en tant qu’administrateur. Ensuite aller à http://localhost:4502/editor.html/content/wknd/lingual-masters/en.html.
  
• Cliquez sur faire glisser les composants, puis insérez la liste de contrôle, la révision des éléments et le composant d’action de l’élément, puis affichez-les en tant que publication pour voir les résultats sur l’interface utilisateur. Capture d’écran ajoutée ci-dessous.
  
• Cliquez sur Ajouter pour voir les articles sur les paniers et la section offre. Une capture d’écran ci-dessous a été ajoutée.
  
  
  

Conclusion

Dans ce guide complet, nous avons appris les tenants et les aboutissants de l’intégration transparente d’AEM avec vue.js. En suivant ces instructions étape par étape, vous pouvez optimiser les performances, créer des composants époustouflants et déployer votre projet AEM vue.js en toute confiance.