Meilleur outillage avec la nouvelle Vue CLI

À la sortie de la dernière version de Vue CLI, nous allons examiner les dernières fonctionnalités et améliorations de cette version qui améliorent sans aucun doute la manière dont vous construisez avec Vue.

Vue.js est un framework de développement Web frontal avec un immense écosystème. Il a récemment dépassé React pour devenir le framework JavaScript le plus populaire. Outre son intégration simple, sa documentation détaillée et sa flexibilité, Vue.js est accompagné d’un CLI pour l’échafaudage des projets Vue.js.

Le CLI est fourni avec tous les outils et bibliothèques qui en font un outil moderne frontend. une telle corvée. Il est livré avec un pack Web pour le groupage, le chargement paresseux, le rechargement à chaud, etc. Babel pour la transpilation ES2017 et l'injection de polyfill; et ESLint config pour vous aider à mieux écrire le code JavaScript.

Avec la dernière version de la CLI (version 3), plusieurs améliorations notables et fonctionnalités intéressantes vont certainement améliorer l'expérience du développeur Vue.js. Nous allons passer en revue certaines des nouvelles fonctionnalités que vous devriez rechercher lors de l'utilisation de la CLI.

La version 3 propose une réécriture de la version précédente dans le but de réduire la complexité de la configuration d'un environnement de développement front-end moderne. [19659003] La nouvelle interface de ligne de commande offre une prise en charge immédiate pour:

• fonctions de pack Web préconfigurées telles que le remplacement de module à chaud, le fractionnement de code, la secousse d'arbres, la mise en cache efficace à long terme, les superpositions d'erreur , etc.
      
• Transpilation ES2017 (plus propositions communes telles que propagation étendue et importation dynamique) et injection multifonctions basée sur l'utilisation via Babel 7 + preset-env .
      
• Prise en charge de PostCSS (avec le préfixe automatique activé par défaut) et de tous les pré-processeurs CSS principaux.
      
• HTML généré automatiquement avec des liens d'actifs hachés et des indicateurs de ressources de préchargement / pré-extraction.
      
• Modes et variables d'environnement en cascade via les fichiers .env .
      
• Mode moderne: expédiez le package natif ES2017 + et l'ancien paquet en parallèle (détails ci-dessous).
      
• Mode multi-pages: créez une application avec plusieurs points d'entrée HTML / JS.
      
• Construire des cibles: créez des composants Vue à fichier unique dans une bibliothèque ou des composants Web natifs (détails ci-dessous).
      

Mode moderne

La nouvelle interface de ligne de commande fournira un nouvel indicateur pour créer une version de votre application qui supprime la prise en charge des navigateurs hérités. Des morceaux de fichiers beaucoup plus volumineux sont générés lors de la prise en charge des navigateurs hérités, et cette fonctionnalité constitue une alternative indispensable, car vous pouvez potentiellement réduire la taille de génération de votre application de 16% en ciblant les navigateurs récents qui prennent en charge les modules ES.

Lors de la construction de votre application. , incluez le drapeau - modern et la CLI construira deux versions de votre application, une pour les navigateurs modernes et un kit séparé pour les navigateurs hérités.

Deux versions distinctes de votre application sont disponibles. chargez l'ancienne version sur les anciens navigateurs et la version moderne sur les navigateurs plus récents.

Pour commencer à utiliser cette fonctionnalité, exécutez la commande suivante pour créer votre application:

     vue-cli-service build --modern 

Interface utilisateur graphique

Il s’agit maintenant d’une fonctionnalité qui suscitera beaucoup d’intérêt: une interface utilisateur permettant de gérer vos projets, plug-ins, dépendances et configurations de Projet Vue.js. La modification des paramètres du projet devient une promenade dans le parc une fois que vous pouvez visualiser vos modifications. C'est encore plus impressionnant lorsque vous réalisez que vous pouvez modifier votre répertoire de construction, vos paramètres ESLint, etc. en utilisant les boutons bascules et vérificateurs.

Il existe une page Plugins où vous pouvez gérer (mettre à jour, ajouter, supprimer). les plugins de votre projet. L’onglet Dépendances dans lequel vous pouvez rechercher et installer des dépendances de projet, affiche le total mensuel des téléchargements pour chaque dépendance, ce qui est très utile pour comparer la popularité d’une bibliothèque. Un onglet Tasks est également inclus; vous pouvez servir construire lint et tester votre projet, tout cela dans l'interface graphique.

Je suis sûr que vous avez hâte de lancer ceci et de le vérifier. L'interface utilisateur est toujours en alpha, vous pouvez donc rencontrer quelques bugs ici et là. Commencez avec l'interface graphique en exécutant la commande suivante:

     vue ui 

Prototypage instantané

Il peut être très frustrant de démarrer avec un framework ou une bibliothèque. la configuration impliquée. Le processus d'exécution d'une application implique généralement l'installation de dépendances de projets et de plug-ins, la compilation et la compilation des fichiers de projet, qui prennent tous plusieurs minutes. C'est pourquoi la nouvelle version de la CLI dispose d'une fonctionnalité de prototypage instantané qui peut servir votre application immédiatement sans avoir à installer des dépendances de projet.

Pour commencer à utiliser cette fonctionnalité, vous devez exécuter npm install - g @ vue / cli-service-global pour installer le service CLI globalement. Desservir votre application devient immédiatement plus facile: exécuter vue serve sur n’importe quel fichier *. Vue présente une vue instantanée du fichier. Ce fichier peut également être déplacé dans un projet plus grand et il continuera à fonctionner comme prévu.

Commencez par exécuter:

   npm   install  -g @ vue / cli-service-global

Créez ensuite un fichier *. Vue :

     // Test.vue
     < template > 
       < div >  Prototypage instantané. Yaay !!!  </  div > 
     </  modèle > 

Servez le fichier à l'aide de la commande:

     vue serve Test.vue

Configurable

Même si les CLI résolvent le problème de la complexité de la configuration de la plupart des projets en soustrayant la configuration aux utilisateurs, ils empêchent également la configuration ultérieure de la configuration disponible et n'offrent le plus souvent que la solution «éjection». , "La configuration supplémentaire incombe à l'utilisateur et certains utilisateurs se heurtent à la complication de l'extension de la configuration de leur application.

Avec l'introduction de cette version CLI, les utilisateurs pourront étendre la configuration actuelle de leur pack Web à l'aide d'outils tels que: [19659050] webpack-merge : pour la fusion d’options supplémentaires dans la configuration actuelle

. Vous pouvez inclure des fichiers de configuration dans le dossier racine de votre projet pour des bibliothèques tierces telles que PostCSS, Babel, TypeScript, ESLint, etc., et elles respecteront les règles regroupement des fichiers de configuration pour ces outils.

Le CLI est également livré avec une commande inspecter vue inspect pour jeter un coup d’œil à la configuration actuelle du WebPack. Écrire des plugins ou installer des plugins tiers étendra encore la configuration et vous permettra de mieux contrôler votre configuration actuelle.

Système de plug-in extensible

Les modèles étaient une fonctionnalité répandue dans la version 2 de la CLI. Eh bien, la prise en charge des modèles a été supprimée. Mais, plutôt que des modèles, vous pouvez créer des préréglages suffisamment puissants pour injecter des dépendances et des fichiers lors de la phase d'échafaudage de l'application et modifier la configuration Webpack de l'application ou injecter des commandes supplémentaires au service CLI au cours du développement.

Pour créer des plugins et des pr Pour vos projets, une nouvelle API de plugin a été fournie afin que vous puissiez développer des plugins à utiliser pour vos projets et à partager avec la communauté. Cette API vous permettra de configurer l’installation de votre projet, vous donnant ainsi le pouvoir d’étendre votre configuration.

Vous voulez créer votre application en utilisant TypeScript plutôt que JavaScript? Un plugin peut étendre la configuration actuelle de votre projet pour inclure la configuration pour TypeScript. Vous pouvez inclure des configs pour Apollo, Jest, Cypress, etc.

Commencez à créer des plugins en visitant le guide de développement du plugin . Vous pouvez également rechercher et installer des plug-ins de communauté à l'aide de l'interface graphique fournie par la CLI ou visiter le référentiel de awesome-vue pour afficher une liste des plug-ins tiers.

Créer des composants Web

Le nouveau La version CLI inclut une commande permettant de générer et d’envelopper tous les composants existants *. Vue et de les enregistrer en tant qu’éléments natifs. Pour utiliser l'élément créé, incluez l'élément dans une page sous la forme et incluez Vue dans son ensemble sur la page.

Pour créer un composant Web à l'aide d'un composant *. Vue exécutez la commande suivante:

     vue-cli-service build --target  wc  --nommez l'élément src / TheComponent.vue

Vous pouvez également créer plusieurs composants Vue dans un ensemble distinct. L'enregistrement d'un fichier d'entrée enregistre tous les composants en tant qu'éléments natifs et charge de manière asynchrone les composants sous-jacents lorsque l'élément est instancié.

Pour créer plusieurs composants Vue, utilisez la commande suivante. La commande utilise un motif glob pour faire correspondre tous les composants *. Vue du dossier:

     construction-service -construction - cible Go-async  'src / components / *. Vue' 

Mode multi-pages

Avec la dernière version de la CLI, vous pouvez créer votre application en mode multi-pages, dans laquelle vous fournissez des fichiers d'entrée distincts pour chaque page. En mode multi-pages, chaque “page” doit avoir un fichier d’entrée JavaScript correspondant. La valeur de chaque page doit être un objet où la clé est le nom de l'entrée et la valeur peut être:

• Objet qui spécifie le modèle nom du fichier titre morceaux et entrée . La propriété entrée est la seule propriété requise. Toute autre propriété ajoutée est également transférée directement à html-webpack-plugin ce qui permet à l'utilisateur de personnaliser ledit plugin.
      
• Chaîne spécifiant son entrée .
      

Voici un exemple montrant comment créer deux pages comme indiqué dans la documentation officielle: module

     .  exports  =   {
      pages :   {
        index :   {
           // entrée pour la page 
          entrée :   'src / index / main.js' 
           // le modèle source 
          modèle :   'public / index.html' 
           // sortie sous la forme dist / index.html 
          nom de fichier :   'index.html' 
           // lors de l'utilisation de l'option title, 
           // la balise title du modèle doit être 
           title :   ' Index Page '
           // morceaux à inclure sur cette page, comprend par défaut 
           // extraits extraits et morceaux courants fournis par le fournisseur. 
          morceaux :   [ «marchands en morceaux»   «morceaux en commun»   «index» ] 
        }  , 
         // lors de l'utilisation du format de chaîne avec entrée seulement, 
         // le modèle est considéré comme `public / subpage.html` 
         // et revient à` public / index.html` si ce n'est pas le cas found. 
         // Le nom du fichier en sortie est `subpage.html`. 
        sous-page :   'src / subpage / main.js' 
      } 
    } 

Vous pouvez en savoir plus sur la configuration de chaque page en consultant la documentation officielle .

Cibles de construction

La possibilité de spécifier des cibles de construction lors de la construction de votre page est également incluse. application. Grâce à cette fonctionnalité, vous pouvez créer différentes versions de votre application pour plusieurs cas d'utilisation.

1. Bibliothèque

Si vous travaillez sur une grande bibliothèque, vous pouvez définir votre cible de génération sur bibliothèque . Lors de l'utilisation de la cible de génération de la bibliothèque la CLI construit votre application sans inclure Vue dans le bundle de compilation, mais utilise plutôt la variable globale Vue sinon elle tente de la charger en tant que dépendance. ] Pour créer votre application en tant que bibliothèque, utilisez la commande suivante:

     vue-cli-service build --target lib --nom myLib  [ entrée ] 

pour fournir un fichier d'entrée qui peut être un fichier .js ou .vue . L'omission d'un fichier d'entrée correspond par défaut au fichier d'entrée src / App.vue .

Après la construction d'une bibliothèque, quatre fichiers distincts sont générés:

• Un paquet CommonJS destiné à être utilisé via des bundles ( malheureusement, Webpack ne prend pas encore en charge le format de sortie des modules ES pour les bundles) – dist / *. common.js
• Un bundle UMD destiné à être consommé directement dans les navigateurs ou avec les chargeurs AMD – dist / *. umd .js
• Version agrandie de la compilation UMD – dist / *. umd.min.js
• Fichier CSS extrait (peut être forcé en ligne par la définition de css: {extract: false} in vue.config.js ) – dist / *. css

C’est la cible de construction par défaut qui surpasse un fichier index.html bibliothèques de fournisseurs divisées en morceaux distincts et actifs statiques placés dans le répertoire public .

Il est relativement facile de démarrer avec la nouvelle version de la CLI. Exécutez la commande suivante pour installer la CLI globalement sur votre PC:

      npm   install  -g @ vue / cli
     # ou 
    fil global add @ vue / cli

Consultez également la documentation officielle pour obtenir un aperçu des dernières fonctionnalités fournies avec la version.

Pour plus d'informations sur Vue:

Vous souhaitez en savoir plus sur la création d'interfaces utilisateur de qualité avec Vue? Découvrez Kendo UI pour Vue notre bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tous les composants dont vous aurez besoin, des grilles et graphiques aux planificateurs et aux cadrans.