Création et gestion de projets Vue avec Vue UI

La version 3 de Vue CLI nous fournit une interface utilisateur graphique pour créer et gérer des projets Vue.js. Lisez le long pour apprendre à créer et à gérer un projet Vue.js à l’aide de Vue UI.

Le Vue CLI fournit un outil standard permettant un développement rapide dans Vue.js. Il garantit le bon fonctionnement des divers outils de construction nécessaires au développement de Vue.js, ainsi que des valeurs par défaut sensibles, de sorte que vous puissiez vous concentrer sur l'écriture de votre application plutôt que de passer des jours à se quereller. Avec la Vue CLI, nous obtenons:

1. Échafaudage instantané de projets
2. Prototypage rapide de nouvelles idées avec un seul fichier Vue
3. Une collection de plugins officiels d’intégration
4. Une interface graphique complète à créer gérer les projets Vue.js

Je vais vous montrer comment créer et gérer un projet Vue.js à l'aide de l'interface graphique de Vue CLI. Cette interface graphique est appelée l'interface utilisateur Vue.

Mise en route

Nous devons installer Vue CLI pour pouvoir l'utiliser. Pour l'installer, ouvrez la ligne de commande et exécutez npm install -g @ vue / cli si vous utilisez npm, ou exécutez yarn global add @ vue / cli si vous utilisez en utilisant du fil. Vous pouvez vérifier qu'il est correctement installé en exécutant simplement vue . Cela devrait vous afficher un message d'aide répertoriant toutes les commandes disponibles.

Création d'un projet

Pour utiliser l'interface utilisateur Vue, nous allons exécuter la commande vue ui dans la ligne de commande. Cela devrait faire apparaître une interface utilisateur graphique similaire à celle ci-dessous.

L'interface utilisateur a trois onglets; Projets Créez et Import . L'onglet Projets affiche la liste des projets existants, l'onglet Créer, un écran avec des options pour échafauder un nouveau projet, et l'onglet Importer vous permet d'importer un projet Vue existant ne figurant pas dans l'onglet Projet.

Pour créer un projet nouveau projet, procédez comme suit:

1. Cliquez sur l’onglet Créer .
2. Sélectionnez l’emplacement où vous souhaitez enregistrer notre projet.
3. Cliquez sur le bouton “Créer un nouveau projet ici”. Cela nous amène à l'écran Créer un nouveau projet .
4. Puis entrez un nom pour le projet dans la zone de texte sous l'étiquette Projet dossier .
5. Sélectionnez le gestionnaire de packages dans votre choix et choisissez si vous souhaitez initialiser un référentiel git et s'il faut remplacer le dossier de projet existant s'il existe. Laissez les options par défaut et cliquez sur le bouton Suivant pour passer à l'étape suivante.
6. L'écran suivant vous demande de sélectionner un préréglage. Vous pouvez choisir le préréglage par défaut, qui est fourni avec une configuration de base de Babel + ESLint. sélectionnez Manual pour choisir les fonctions dont vous avez besoin. ou choisissez Remote pour utiliser un préréglage distant. Sélectionnez Manuel et cliquez sur le bouton Suivant pour accéder à l'écran suivant.
7. L'écran suivant affiche la liste des fonctionnalités que nous souhaitons ajouter au projet. Sélectionnez Babel, Linter / Formatter, les pré-processeurs CSS et Utiliser les fichiers de configuration. Cliquez ensuite sur le bouton Suivant pour accéder à l'écran suivant.
8. Sur la page suivante, nous sélectionnons Sass / SCSS comme préprocesseur CSS, ESLint + Prettier. en tant qu'option de linter / formateur et en option de sauvegarde lors de la sauvegarde.
9. Cliquez sur le bouton Créer un projet pour créer le projet en utilisant les options sélectionnées ci-dessus. Il affiche une fenêtre de dialogue vous demandant si vous souhaitez enregistrer les options en tant que nouveau préréglage afin que nous puissions l’utiliser pour échafauder des projets ultérieurement. Cliquez sur "Continuer sans enregistrer" pour qu'il crée le projet sans enregistrer de préréglage.

Le projet sera créé et devrait afficher une page avec une liste des plugins installés pour le projet.

Project Plugins

Vue CLI utilise une architecture à base de plug-in qui rend Vue CLI flexible et extensible. Vous pouvez ajouter plus de plugins en cliquant sur le bouton Add plugin en haut à droite. Vous pouvez gérer les dépendances de votre projet à partir de l'onglet Dépendances avec la possibilité de supprimer ou d'installer de nouvelles dépendances.

Dépendances du projet

Vous avez l'option pour changer certaines configurations de projet. Par exemple, pour modifier le répertoire dans lequel les fichiers de production sont enregistrés, accédez à l'onglet Configuration en le sélectionnant dans le menu latéral. Puis sélectionnez Vue CLI et modifiez l'option Répertoire de sortie .

Tâches du projet

L'onglet Tâches permet nous pour exécuter une tâche telle que servir, construire, lint, ou inspecter. La tâche serve démarre le serveur de développement avec un rechargement à chaud. Lorsque cette tâche est en cours d'exécution, nous pouvons accéder à l'application Web sur localhost: 8080 . Sur cette page également, nous voyons un tableau de bord avec une analyse de la taille de la dépendance du projet, de la taille de l’actif, etc. Cela peut nous aider à nous tenir au courant de la taille de l'application et de la manière dont elle peut affecter différents utilisateurs à différentes vitesses de connexion. La tâche de construction contient également ce tableau de bord informatif, mais elle est utilisée lorsque nous voulons créer notre application de manière à ce qu'elle compile et réduit les fichiers à des fins de production. La tâche de la charpie limite et corrige les erreurs.

Importer des projets

Si vous avez créé des projets Vue sans utiliser l'interface utilisateur de Vue, ils ne figureront pas dans la liste . Onglet Projets . La fonction d'importation de l'interface utilisateur Vue nous permet d'importer des projets afin que nous puissions les gérer et les exécuter à partir de l'interface utilisateur Vue.

Pour importer un projet, il vous suffit de naviguer vers Import à partir de l'écran d'accueil, sélectionnez Cliquez sur le dossier à importer, puis cliquez sur le bouton Importer ce dossier . Si vous êtes en dehors de la page d'accueil, cliquez sur l'icône Accueil en bas à gauche de la page.

Ça y est!

Toutes ces fonctionnalités nous aident à créer et à gérer facilement des projets Vue. Vue CLI est un plugin, ce qui nous permet d’ajouter et de supprimer des plugins. Nous pouvons ajouter Vuetify (un framework de composants de conception matérielle pour Vue) en tant que plugin. Nous pouvons également modifier les configurations Vue CLI et ESLint et exécuter des tâches telles que serve (équivalent à exécuter npm run serve à partir de la ligne de commande).

J'espère que ce message a vous a montré comment utiliser l'interface utilisateur Vue. Allez-y et créez de superbes applications Vue!

Pour plus d'informations sur Vue

Vous souhaitez en savoir plus sur la création d'excellentes interfaces utilisateur 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. Et il s'intègre facilement à Vue CLI .