Apprendre Vue 3 : Installation

Installation via CDN

L’avantage indéniable d’un lien CDN est qu’il permet d’inclure Vue.js à l’aide d’une simple balise <script>. Cela permet entre autres de ne charger Vue.js que sur une page de notre site.

En développement on peut utiliser la dernière version de cette manière :

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Sur la page web, on peut vérifier que Vue.js a bien été initialisé en inspectant la console et en constatant la présence du message suivant :

You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.

L’utilisation de Vue.js à partir d’un CDN rend la configuration plus simple et convient à la création de sites basiques, de prototypes ou encore à des fins pédagogiques.

En revanche, en l’absence de phase de “build” de l’application sur un serveur Node.js, vous ne pourrez pas tirer plein potentiel de Vue.js et notamment utiliser la syntaxe SFC (Single-File Component), dont nous parlerons par la suite.

Installation avec Vite

Qu’est-ce que Vite ?

Vite est un outil de build en temps réel pour les applications web basées sur JavaScript. Vite intègre Rollup pour « bundler » les assets et utilise un **serveur de développement intégré, **fournissant des temps de rechargement rapides et une expérience de développement fluide.

Voici les fonctionnalités principales permises par Vite :

1. Live Reload : offre une expérience de développement en temps réel, avec un rechargement instantané des changements apportés au code.
2. Modules ESM : prise en charge les modules ECMAScript natifs (ESM) sans transpiler vers d’autres formats.
3. Préprocesseurs CSS : prise en charge des fichiers CSS, LESS, Sass, Stylus, etc.
4. Import dynamique : permet un chargement plus rapide des composants en ne les chargeant que lorsqu’ils sont nécessaires, ce qui accélère considérablement le temps de chargement des applications Vue.js.
5. Plugin pour Vue.js : Vite est particulièrement adapté pour le développement d’applications Vue.js, grâce à un plugin spécialement conçu pour le framework.
6. Configuration minimale : nécessite une configuration minimale, ce qui facilite la prise en main et l’utilisation.
7. Optimisation de la production : optimise automatiquement les fichiers pour la production, en générant des fichiers minifiés et en les préparant pour un déploiement efficace.

Si Vite peut être utilisé avec divers frameworks JavaScript tels que Vue.js, React, Svelte et d’autres, il s’avère redoutable lorsqu’il est couplé à Vue.js. Et pour cause, Vite a été initialement conçu par Evan You, le créateur de Vue.js, pour résoudre les problèmes de lenteur et de complexité associés à la compilation des projets Vue.js avec des outils comme Webpack.

Vite est livré avec un plugin spécialement conçu pour Vue.js qui permet de développer et de construire des applications Vue.js en temps réel. Ce plugin prend en charge les fonctionnalités clés de Vue.js que nous allons découvrir dans cette formation, telles que les :

• Templates .vue
• Single-File Components (SFC)
• Directives
• Mixins
• Plugins Vue
• Routes
• Etc.

En résumé, Vite est un outil de build performant et facile à utiliser pour les projets Vue.js, qui peut aider les développeurs à accélérer leur processus de développement et à créer des applications web modernes plus rapidement.

Création du projet

Désormais, exécuter la commande suivante :

npm init vue@latest

Cette commande installe et exécute create-vue, l’outil de construction officiel d’application Vue.js. L’installation via create-vue, basée sur Vite est l’approche moderne qui vient remplacer Vue CLI, basé sur Webpack.

Cet outil permet d’initialiser l’application Vue.js en y ajoutant la configuration souhaitée. Pour cela il suffit de sélectionner Yes or No à chaque question :

Vue.js - The Progressive JavaScript Framework

√ Project name: ... MonProjet
√ Package name: ... monprojet
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No / Yes
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

1. Project name : il s’agit du nom de votre projet. Ce nom sera donné au dossier racine.
2. Package name : il s’agit du nom du paquet. Il est défini automatiquement en se basant sur le nom du projet, en minuscule et sans espaces.
3. Add TypeScript : TypeScript est un langage de programmation open-source développé par Microsoft qui est un sur-ensemble typé de JavaScript.
4. Add JSX Support : JSX est une extension de syntaxe introduite par le framework React, pour écrire du HTML en JavaScript.
5. Add Vue Router : Vue Router est une bibliothèque de routage pour les applications Vue.js.
6. Add Pinia : Pinia est une bibliothèque de gestion d’état d’application pour Vue.js.
7. Add Vitest : Vitest est un framework de test unitaire pour les applications Vue.js. Un test unitaire permet d’exécuter chaque unité de code isolée du reste de l’application, facilitant ainsi l’ajout de nouvelles fonctionnalités, ainsi que la détection et la correction de bugs.
8. Add an End-to-End Testing Solution : Une solution de test de bout en bout (End to End ou “E2E”) est un outil qui permet d’automatiser les tests simulant les interactions de l’utilisateur avec l’interface utilisateur et en vérifiant le comportement de l’application dans son ensemble. Cypress et Playwright sont proposés par l’utilitaire.
9. Add ESLint : ESLint est un linter JavaScript configurable qui permet de détecter et de signaler les erreurs de code, les pratiques non recommandées et les conventions de style dans les projets JavaScript.
10. Add Prettier : Prettier est un outil de formatage de code JavaScript qui permet d’automatiser la mise en forme du code pour respecter un ensemble de règles de style prédéfinies.

Une fois le projet initialisé avec la configuration souhaitée.

Déplacez vous dans le projet :

cd MonProjet

Installez les dépendances du projet (spécifiées en amont) :

npm install

Lancement du serveur

Le lancement du serveur local pour travailler avec Vue 3 est effectué avec la commande vite. Cette commande est ajoutée dans les scripts du fichier 📄 package.json et s’utilise via l’alias suivant :

npm run dev

Cette commande démarre le serveur de développement qui prend en charge la compilation en temps réel de votre application ainsi qu’une fonctionnalité “Hot Module Replacement” (HMR), qui permet aux développeurs de voir les modifications apportées à leur code en temps réel sans avoir à recharger la page.

Par défaut, ce serveur local est démarré sur le port 3000.

Architecture du projet

Familiarisons-nous avec l’arborescence d’un projet vue basique. Après avoir répondu No à toutes les options, on obtient l’arborescence de projet suivante :

📁 MonProjet
├── 📁 node_modules
│   ├── 📄 module1
│   ├── 📄 module2
│   └── ...
├── 📁 public
│   └── 🖼️ favicon.ico
├── 📁 src
│   ├── 📁 assets
│   └── 📁 components
│       ├── 📄 App.vue
│       └── 📄 main.js
├── 📄 .gitignore
├── 📄 index.html
├── 📄 package.lock.json
├── 📄 package.json
├── 📄 README.md
└── 📄 vite.config.js

Dossiers principaux :

À la racine, on retrouve tout un tas de fichiers de configuration dont les principaux sont :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<link rel="icon" href="/favicon.ico">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Vite App</title>
	</head>
	<body>
		<div id="app"></div>
		<script type="module" src="/src/main.js"></script>
	</body>
</html>