Fermer

mars 4, 2019

Comment construire votre premier package Vue.js et publier sur NPM


Nous allons apprendre à créer notre propre plugin pour Vue.js et à le distribuer sur NPM pour que tout le monde puisse l'utiliser.

Les plugins sont ce qui rend nos vies de développeurs beaucoup plus productives. La plupart de nos projets en dépendent, car ils nous permettent de fournir de nouvelles fonctionnalités avec une grande rapidité.

Comme indiqué dans la documentation officielle de Vue.js il n'y a pas de champ strictement défini pour un plugin. . Il ajoute simplement une fonctionnalité de niveau global à votre projet . Mais ils appartiennent généralement à ces cinq catégories en fonction de ce que nous essayons de réaliser:

  1. Ajoutez quelques méthodes ou propriétés globales (par exemple, voici ce que Vuex ou vue-router Est-ce que).
        
  2. Ajoutez un ou plusieurs actifs globaux (par exemple, une feuille de style avec / ou une bibliothèque JavaScript).
        
  3. Ajoutez quelques options de composant par mixin global (par exemple, c'est ce que fait vue-html-to-paper ).
        
  4. Ajoutez quelques méthodes d'instance Vue en les attachant à Vue.prototype (par exemple, c'est ce que vue-axios fait).
        
  5. Une bibliothèque qui fournit sa propre API, tout en injectant une combinaison de ce qui précède.
        

Maintenant que vous comprenez à quel point les plugins peuvent être pratiques et à quoi ils peuvent répondre, voyons comment en ajouter un à votre projet. Ensuite, nous allons apprendre à fabriquer le nôtre et à le distribuer sur NPM pour que tout le monde l’utilise (oui, ça va être super amusant!).

Comment ajouter un plugin Vue.js à votre projet.

Pour utiliser votre plugin après l'avoir installé avec npm install (ou fil ajouter ), vous devez accéder à votre fichier main.js . C’est le point d’entrée qui pilote notre application Vue. Importez-le et appelez la méthode globale Vue.use () . Attention cependant: tous les plugins doivent être instanciés avant de démarrer votre application avec new Vue () .

 import  Vue  de   "vue" ; [[19659015] import  YourPlugin  de   "yourplugin" ; 

Vue .  utilisez  ( YourPlugin ) ; 

 new   Vue  ( {
 // [...]
} )

Il existe également un autre moyen d'ajouter un nouveau plugin lorsque l'auteur du package le permet: supprimer le lien CDN dans la balise de script de votre en-tête.

 < script src  =  "https://cdn.jsdelivr.net/npm/yourplugin@latest/lat/dist/yourplugin.min.js">[1965903133005757305730>>19599031(1)voussouhaitezpersonnaliserlecomportementd'unpluginVouspouvezfacilementlefaireenluipassantquelquesoptionslorsquevousappelez Vue.use () . Voici comment cela fonctionne: 

 Vue .  utilisez  ( YourPlugin   {
 une option :   false 
 une autre option :   false 
} ) 

 Par exemple, avec  vue-chartist vous pouvez choisir le texte à afficher lorsqu'aucune donnée n'est disponible pour bien tracer le graphique. comme suit:
 Vue .  utilisez  ( VueChartist   {
 messageNoData :   "Vous n’avez pas assez de données" 
} ) ; 

 Revenons maintenant à l’événement principal: construisez ensemble votre premier plug-in Vue.js. 1965
 Comment construire votre propre plugin Vue.js à partir de Scratch
 Si vous lisez ceci, vous êtes probablement un développeur frontend comme moi. Et comme tout autre développeur frontend, vous adorerez probablement avoir de beaux boutons pour vos interfaces! C’est ce que nous allons construire: un ensemble de jolis boutons que nous pourrons réutiliser. Cela nous fera gagner beaucoup de temps pour les projets futurs!
 Étape 1: initialisation de la structure de plug-in
 Permet de créer un dossier vide pour notre paquet et d’initialiser NPM. Cela générera un nouveau fichier  package.json . Nous y reviendrons plus tard.
 $  mkdir  joli-beau-bouton  &&   cd  beau-beau-bouton
$  npm  init
 # La commande ci-dessus crée un nouveau package.json 
 # Appuyez sur Entrée pour répondre à toutes les questions suivantes 

 Ajoutez un nouveau dossier appelé src à la racine, dans lequel vous créez un nouveau fichier  NiceHandsomeButton .vue . Vous pouvez rapidement prototyper avec un seul fichier  *. Vue  avec les commandes  vue serve  et  vue build mais elles nécessitent l'installation préalable d'un addon global supplémentaire. :
  npm   installez  -g @ vue / cli
 npm   installer  -g @ vue / cli-service-global

 Maintenant, si vous exécutez:
 $ vue serve NiceHandsomeButton.vue

 Visitez le site  http: // localhost: 8080 / . Une page vierge devrait apparaître dans votre navigateur. Travaillons maintenant sur notre composant bouton! ?‍??‍?
 Pour en savoir plus sur  @ vue / cli-service-global, consultez la documentation officielle . Cet ajout est qu'il est très utile pour travailler sur un seul fichier  .vue  sans échafaudage d'un projet entier avec  vue créer mon-nouveau-projet .
 Étape 2: Travailler sur Notre composant Beau bouton
 Modèle
 Comme ce didacticiel n’a pas pour objet d’écrire les composants Vue, je pense que vous devez connaître les bases. Le code complet de notre beau bouton est disponible ci-dessous (le modèle, la logique JavaScript et le style). Copiez-le, ouvrez  NiceHandsomeButton.vue  et collez le contenu à l'intérieur.
 < template > 
  < button 
   @click  =  ] " onClick "  
   @dblclick  =  " surDoubleClick "  
  : classe  =  "  [
    ' beau-beau-bouton ' ,
    ' beau-beau-bouton - '  + couleur,
    ' beau-beau-bouton - '  + taille,
   {
     ' beau-beau-bouton-arrondi ' : arrondi
   }
  ]  "
 > 
   < emplacement >  </  emplacement > 
  </  bouton > 
 </  template >  

 Nous avons gardé les choses simples, mais voici quelques points à noter:
  •  J'utilise BEM. Si vous ne le connaissez pas encore, lisez ceci. maintenant:  MindBEMding - prenez votre tête autour de la syntaxe BEM .
         
  •  J'ai ajouté les accessoires  de couleur  de taille  et  arrondis . Comme leurs noms l'indiquent, ils nous permettront de contrôler la couleur, la taille et de déterminer si notre bouton doit être arrondi ou non.
         
  •  J'utilise également un emplacement pour le contenu afin que nous puissions l'utiliser comme un bouton normal  My Button Label .
         
 JavaScript
 Définissons les accessoires que notre composant peut accepter, ainsi que les deux méthodes qui émettront un événement lorsque nous cliquons / double-cliquons dessus.
 < script > [19659015] export   défaut   {

 accessoires :   {

  couleur :   {

   type :  String 

    défaut :   "bleu" 

    validateur  ( x ). {

      return   [ "blue"   "green"   "red" ] .  indexOf  ( x )  ! ==   -  1 ; 

   } 

  } 

  arrondi :   {

   type :  Boolean 

    défaut :   true 

  } 

  taille :   {

   type :  String 

    défaut :   "défaut" 

    validateur  ( x ) {

     return   [ "petit"   "défaut"   "grand" ] .  indexOf  ( x )  ! ==   -  1 ; 

   } 

  } 

 } 








 Le meilleur outil 2023 pour ta croissance Instagram ! 








   


Source link