Créer et Exécuter un Projet Vue.js

Qu'est-ce que Vue.js ?

Vue.js est un framework JavaScript progressif pour construire des interfaces utilisateur. Contrairement à d'autres frameworks volumineux, Vue adopte une conception de développement incrémental de bas en haut. Le noyau de Vue est axé uniquement sur la couche vue, ce qui le rend non seulement facile à prendre en main mais aussi facile à intégrer avec d'autres bibliothèques ou projets existants. Vue 3 est la dernière version de Vue.js, apportant de nombreuses nouvelles fonctionnalités et améliorations, y compris des performances plus rapides, une taille de package plus petite et un meilleur support de TypeScript.

Principales Caractéristiques et Avantages de Vue 3

• API Composition : Organise le code logique à travers la composition de fonctions, rendant le code plus facile à maintenir et à réutiliser.
• Performances améliorées : Vue 3 utilise des objets Proxy pour implémenter le système réactif, améliorant significativement les performances.
• Taille de package réduite : Grâce à la technique de Tree-shaking, la taille du package de Vue 3 est plus petite que celle de Vue 2.
• Meilleur support TypeScript : Vue 3 offre de meilleures définitions de types TypeScript, améliorant ainsi l'expérience de développement.
• Cycle de vie des composants amélioré : De nouveaux hooks de cycle de vie rendant la logique des composants plus claire et plus facile à gérer.

Utiliser Vue 3 peut aider les développeurs à construire des applications Web modernes et réactives plus efficacement.

Créer et Exécuter un Projet Vue 3 avec ServBay

Dans cet article, nous allons utiliser l'environnement Node.js fourni par ServBay pour créer et exécuter un projet Vue 3. Nous utiliserons la fonctionnalité 'Host' de ServBay pour configurer le serveur Web, et mettrons en œuvre l'accès au projet via proxy inverse et service de fichiers statiques.

Créer un Projet Vue 3

1. Initialiser le Projet

   Tout d'abord, assurez-vous que vous avez installé l'environnement Node.js fourni par ServBay. Ensuite, utilisez les commandes suivantes pour initialiser un nouveau projet Vue 3 :

   cd /Applications/ServBay/www
   npm create vue@latest

   Suivez les indications pour entrer le nom du projet (suggestion : servbay-vue-app), et choisissez d'autres options selon vos besoins :

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No
   ✔ Add JSX Support? … No
   ✔ Add Vue Router for Single Page Application development? … Yes
   ✔ Add Pinia for state management? … No
   ✔ Add Vitest for Unit testing? … No
   ✔ Add an End-to-End Testing Solution? … No
   ✔ Add ESLint for code quality? … Yes
   ✔ Add Prettier for code formatting? … Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No

2. Installer les Dépendances

   Entrez dans le répertoire du projet et installez les dépendances :

   cd servbay-vue-app
   npm install

Modifier le Contenu de Sortie du Projet Vue

1. Modifier le fichier src/App.vue

   Ouvrez le fichier src/App.vue et modifiez le contenu pour afficher "Hello ServBay!" :

   <template>
     <div id="app">
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App'
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>

Entrer en Mode Développement

1. Exécuter le Serveur de Développement

   Lancez le serveur de développement et spécifiez le port (par exemple : 8585) :

   npm run dev -- --port 8585

   Cela démarrera un serveur de développement local, ouvert sur le port 8585.

2. Configurer le Proxy Inverse de ServBay Host

   Utilisez la fonctionnalité 'Host' de ServBay pour accéder au serveur de développement via proxy inverse. Dans les paramètres 'Host' de ServBay, ajoutez un nouveau proxy inverse :

   • Nom : My first Vue dev site
   • Domaine : servbay-vue-test.dev
   • Type d'hôte : Proxy inverse
   • IP : 127.0.0.1
   • Port : 8585

   Pour plus de détails, veuillez consulter ajouter un site de développement Nodejs.

3. Accéder au Mode Développement

   Ouvrez le navigateur et accédez à https://servbay-vue-test.dev pour voir le projet en temps réel. Grâce à la prise en charge de ServBay des domaines personnalisés et des certificats SSL gratuits, vous bénéficierez d'une sécurité accrue.

Construction de la Version de Production

1. Construire la Version de Production

   Une fois le développement terminé, utilisez la commande suivante pour construire la version de production :

   npm run build

   Une fois la construction terminée, les fichiers statiques générés seront situés dans le répertoire dist.

2. Configurer le Service de Fichiers Statiques

   Utilisez la fonctionnalité 'Host' de ServBay pour accéder à la version de production via le service de fichiers statiques. Dans les paramètres 'Host' de ServBay, ajoutez un nouveau site Web statique :

   • Nom : My first Vue production site
   • Domaine : servbay-vue-test.prod
   • Type d'hôte : Statique
   • Répertoire Racine du Site Web : /Applications/ServBay/www/servbay-vue-app/dist

3. Accéder au Mode Production

   Ouvrez le navigateur et accédez à https://servbay-vue-test.prod pour voir la version de production construite. Grâce au domaine personnalisé de ServBay et aux certificats SSL gratuits, votre site Web bénéficiera d'une sécurité et d'une crédibilité accrues.

En suivant les étapes ci-dessus, vous avez réussi à créer et exécuter un projet Vue 3, et à gérer et accéder à votre projet en utilisant les fonctionnalités fournies par ServBay.