Créer et exécuter un projet Nuxt.js

Qu'est-ce que Nuxt.js ?

Nuxt.js est un framework open-source basé sur Vue.js pour la construction d'applications Vue.js rendues côté serveur. Il propose une multitude de fonctionnalités, telles que le rendu côté serveur (SSR), la génération de sites statiques (SSG), le découpage automatique du code, un système de routage puissant, etc., permettant aux développeurs de créer des applications Web modernes de manière plus efficace.

Principales caractéristiques et avantages de Nuxt.js

• Rendu côté serveur (SSR) : Améliore la vitesse de chargement des pages et les performances SEO.
• Génération de sites statiques (SSG) : Prérend les pages statiques, améliorant les performances et l'expérience utilisateur.
• Découpage automatique du code : Charge uniquement le code JavaScript nécessaire à la page actuelle, optimisant les performances.
• Routage intégré : Routage basé sur le système de fichiers, sans configuration supplémentaire.
• Modularité : Intègre facilement des bibliothèques et services tiers grâce aux modules d'extension.
• Écosystème puissant : Nuxt.js dispose d'une riche bibliothèque de plugins et de modules, rendant le développement plus pratique.

Utiliser Nuxt.js peut aider les développeurs à construire des applications Web modernes et réactives de manière plus efficace.

Créer et exécuter un projet Nuxt.js avec ServBay

Dans cet article, nous utiliserons l'environnement Node.js fourni par ServBay pour créer et exécuter un projet Nuxt.js. Nous utiliserons la fonctionnalité « hôte » de ServBay pour configurer le serveur Web et accéder au projet via un proxy inverse et un service de fichiers statiques.

Créer un projet Nuxt.js

1. Initialiser le projet

   Tout d'abord, assurez-vous d'avoir installé l'environnement Node.js fourni par ServBay. Ensuite, utilisez la commande suivante pour initialiser un nouveau projet Nuxt.js :

   cd /Applications/ServBay/www
   npx create-nuxt-app servbay-nuxt-app

   Suivez les instructions pour entrer le nom du projet (recommandé de nommer servbay-nuxt-app) et sélectionner les autres options selon vos besoins :

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm
   ? UI framework: None
   ? Nuxt.js modules: Axios
   ? Linting tools: ESLint
   ? Testing framework: None
   ? Rendering mode: Universal (SSR / SSG)
   ? Deployment target: Server (Node.js hosting)
   ? Development tools: jsconfig.json (Recommended for VS Code)

2. Installer les dépendances

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

   cd servbay-nuxt-app
   npm install

Modifier le contenu du projet Nuxt.js

1. Modifier le fichier pages/index.vue

   Ouvrez le fichier pages/index.vue, modifiez le contenu pour afficher "Hello ServBay!" :

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style>
   div {
     text-align: center;
     margin-top: 50px;
   }
   </style>

Entrer en mode développement

1. Exécuter le serveur de développement

   Démarrez le serveur de développement et spécifiez le port (exemple : 8585) :

   npm run dev -- --port 8585

   Cela lancera un serveur de développement local sur le port 8585.

2. Configurer le proxy inverse de l'hôte ServBay

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

   • Nom: Mon premier site de développement Nuxt.js
   • Domaine: servbay-nuxt-test.dev
   • Type d'hôte: Proxy inverse
   • IP: 127.0.0.1
   • Port: 8585

   Pour des détails sur les étapes d'installation, consultez ajouter un site web de développement Nodejs.

3. Accéder en mode développement

   Ouvrez un navigateur et accédez à https://servbay-nuxt-test.dev pour voir le projet en temps réel. ServBay permet de personnaliser le domaine et fournit des certificats SSL gratuits, garantissant une sécurité accrue.

Construire la version de production

1. Construire la version de production

   Une fois le développement terminé, utilisez les commandes suivantes pour construire la version de production :

   npm run build
   npm run export

   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é « hôte » de ServBay pour accéder à la version de production via un service de fichiers statiques. Ajoutez un nouveau site web statique dans les paramètres de l'hôte de ServBay :

   • Nom: Mon premier site de production Nuxt.js
   • Domaine: servbay-nuxt-test.prod
   • Type d'hôte: Statique
   • Répertoire racine du site: /Applications/ServBay/www/servbay-nuxt-app/dist

3. Accéder en mode production

   Ouvrez un navigateur et accédez à https://servbay-nuxt-test.prod pour voir la version de production construite. Grâce aux domaines personnalisés de ServBay et aux certificats SSL gratuits, votre site sera plus sécurisé et crédible.

En suivant ces étapes, vous avez réussi à créer et à exécuter un projet Nuxt.js, en utilisant les fonctionnalités fournies par ServBay pour gérer et accéder à votre projet.