Vue.

js : introduction

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel

[Link]@[Link]

H & H: Research and Training 1 / 62

 Plan

1 Introduction
2 IDE : Integrated Development Environment
3 Vue Devtools
4 Solution avec CDN
5 Solution avec Vite
Installation
Création et structure d’un projet créé avec Vite
6 Solution avec CLI
Installation
Création et structure d’un projet CLI
7 Commandes utiles

H & H: Research and Training 2 / 62

 Introduction

[Link]

Framework
Plusieurs traductions
cadriciel
H I ©
environnement de développement
UEL
cadre d’applications
L MO
...
h re fE
c
© Acomposants logiciels
Ensemble de
Facilitant la réalisation d’une (partie de l’) application
Imposant une certaine structure, logique, syntaxe...

H & H: Research and Training 3 / 62

 Introduction

[Link]
Plusieurs types de Framework

Frameworks applicatifs pour le développement d’applications web :

[Link] pour JavaScript,

Spring pour Java,

H I ©
UEL
Symfony pour PHP

MO
...

fE L
Frameworks de présentation de contenu web :

c
Bootstrap pour CSS h re
... © A
Frameworks de persistance

Frameworks de logging

...

H & H: Research and Training 4 / 62

 Introduction

[Link]

Framework : avantages

Gain de temps
H I ©
UEL
Meilleure organisation de projet
Respect de bonnes pratiques
L MO
Meilleure efficacité
h refE
A c
©
Faciliter le travail d’équipe
...

H & H: Research and Training 5 / 62

 Introduction

[Link]

Framework : inconvénients
H I ©
Complexité
UEL
Apprentissage L MO
h refE
...
A c
©

H & H: Research and Training 6 / 62

 Introduction

[Link]

[Link]
Appelé aussi Vue (et prononcé View)
Framework JavaScript (ou TypeScript)
H I ©
Écrit en TypeScript UEL
L MO
Open-source
h refE
c
Créé par Evan You (ex salarié de Google) en 2014
A
©
Permettant de créer des applications web et mobiles (Vue Native)
Front-End
Single page

H & H: Research and Training 7 / 62

 Introduction

[Link] respecte l’architecture MVVM : Model-View-ViewModel

Model : représenté généralement par une objet/classe/interface
référencé par la couche d’accès aux données
View

H I ©
contenant la disposition et l’apparence de ce qu’un utilisateur voit à
l’écran,
UEL
L MO
recevant l’interaction avec l’utilisateur : clic, saisie, survol...

r e f Epar la balise <template>.

représenté dans [Link]

ViewModel A
ch
©
remplaçant du contrôleur dans l’architecture MVC,
connecté à la vue par le data binding,
représenté dans [Link] par la balise <script>.

H & H: Research and Training 8 / 62

 Introduction

[Link]

[Link] utilise : H I ©
UEL
les composants web
L MO
le DOM Virtuel
h refE
A c
©

H & H: Research and Training 9 / 62

 Introduction

[Link]
DOM Virtuel ?

introduit, initialement, par React.

une représentation en mémoire du DOM physique.

H I ©
permettant des mises à jour plus rapides et efficaces en ne modifiant que les parties

UEL
nécessaires de l’interface utilisateur avant de synchroniser ces changements avec le DOM
physique.

L MO
h re fE
A c
©

H & H: Research and Training 10 / 62

 Introduction

[Link]
DOM Virtuel ?

introduit, initialement, par React.

une représentation en mémoire du DOM physique.

H I ©
permettant des mises à jour plus rapides et efficaces en ne modifiant que les parties

UEL
nécessaires de l’interface utilisateur avant de synchroniser ces changements avec le DOM
physique.

L MO
h re fE
A c
Remarque
©
Les modifications apportées au DOM physique entraînent généralement des opérations
coûteuses en termes de temps de traitement.

Chaque modification peut déclencher des réorganisations et des recalculs complexes de

la mise en page.

H & H: Research and Training 10 / 62

 Introduction

[Link]

Quelques outils utilisés par [Link]

npm (node package manager) : le gestionnaire de paquets par défaut pour une
application JavaScript.

H I ©
UEL
vue-cli command line interface : outil facilitant la création et la construction
d’une application [Link] en exécutant directement des commandes.

L MO
fE
webpack : bundler JavaScript

c h re
construit le graphe de dépendances.

©
regroupe
Ades ressources de même nature (.js ou .css...) dans un ou
plusieurs bundles.
fonctionne avec un système de module : un fichier JS est un module, un
fichier CSS est un module...

H & H: Research and Training 11 / 62

 Introduction

[Link]

Les différentes versions d’[Link]

[Link] 1.0 sorti en octobre 2015

[Link] 2.0 sorti en septembre 2016

H I ©
[Link] 3.0 sorti en septembre 2020
UEL
[Link] 3.1 sorti en juin 2021
L MO
h re
[Link] 3.2 sorti en août 2021fE
c
©sortiAen mai 2023
[Link] 3.3

[Link] 3.4 sorti en décembre 2023

[Link] 3.5 sorti en septembre 2024

H & H: Research and Training 12 / 62

 Introduction

[Link]

Quelques sites Web réalisés avec [Link]

H I ©
UEL
GitLab
Alibaba
L MO
Adobe
h refE
A c
...
©

H & H: Research and Training 13 / 62

 Introduction

[Link]

Comment utiliser [Link] ?

H I ©
EL
en utilisant une CDN : Content Delivery Network
U
L
en faisant une installation avec MO: Node Package Manager
NPM
en installant CLI h r e f E Line Interface
c : Command
©A

H & H: Research and Training 14 / 62

 IDE : Integrated Development Environment

[Link]

Quel Environnement de Développement Intégré (IDE) pour [Link] ?

Visual Studio Code (À ne pas confondre avec Visual Studio)

Eclipse
H I ©
UEL
...

L MO
h re fE
A c
©

H & H: Research and Training 15 / 62

 IDE : Integrated Development Environment

[Link]

Quel Environnement de Développement Intégré (IDE) pour [Link] ?

Visual Studio Code (À ne pas confondre avec Visual Studio)

Eclipse
H I ©
UEL
...

L MO
h re fE
A c
Visual Studio Code (ou VSC), pourquoi ?

Gratuit. ©
Extensible selon le langage de programmation.

Recommandé par les développeurs Front-end.

H & H: Research and Training 15 / 62

 IDE : Integrated Development Environment

[Link]

H I ©
UEL
VSC : téléchargement
[Link]/download
L MO
h re fE
A c
©

H & H: Research and Training 16 / 62

 IDE : Integrated Development Environment

[Link]

VSC : extension pour [Link] 2

Vetur
H I ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 17 / 62

 IDE : Integrated Development Environment

[Link]

VSC : extension pour [Link] 2

Vetur
H I ©
UEL
L MO
VSC : extension pour [Link] 3E
c h re
© A par Vue - Official
Volar remplacé
Vue 3 Snippets

H & H: Research and Training 17 / 62

 IDE : Integrated Development Environment

[Link]

Quelques raccourcis VSC

Pour activer la sauvegarde automatique : aller dans File > AutoSave

H I ©
UEL
Pour indenter son code : Alt Shift f

Pour commenter/décommenter : Ctrl

L M:O
r e
Pour sélectionner toutes les f E
occurrences : Ctrl f2

A h
cl’occurrence
©
Pour sélectionner suivante : Ctrl d

Pour placer le curseur dans plusieurs endroits différents : Alt

H & H: Research and Training 18 / 62

 Vue Devtools

[Link]

H I ©
UEL
Vue Devtools

MO
Extension multi-navigateur pour le débogage des applications [Link].

fE L
Installation : [Link]

c h re
© A

H & H: Research and Training 19 / 62

 Solution avec CDN

[Link]

Solution avec CDN : démarche

Depuis VSC, allez dans File > Open Folder...

H I ©
UEL
MO
Cliquez sur Nouveau dossier et saisissez vue-cdn

fE L
Cliquez sur vue-cdn puis sur le bouton Sélectionner un dossier

h re
Dans vue-cdn, créez deux fichiers [Link] et [Link]
c
© A
Dans [Link], saisissez html:5 ou ! puis cliquez sur Entree

H & H: Research and Training 20 / 62

 Solution avec CDN

[Link]

Code généré

<!DOCTYPE html>
<html lang="fr">

H I ©
UEL
<head>
<meta charset="UTF-8">

MO
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

fE L
<body>

c h re
</body>

</html> © A

H & H: Research and Training 21 / 62

 Solution avec CDN

[Link]

Référençons [Link] dans [Link]

<!DOCTYPE html>
<html lang="fr">

H I ©
UEL
<head>
<meta charset="UTF-8">

MO
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cours [Link]</title>
</head>

fE L
<body>
<script src="[Link]">
c h re
</script>
</body>
© A
</html>

H & H: Research and Training 22 / 62

 Solution avec CDN

[Link]

Ajoutons la CDN ([Link])

<!DOCTYPE html>

©
<html lang="fr">

H I
UEL
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

MO
<title>Cours [Link]</title>

L
</head>

<body>

h re fE
<script src="[Link]
<script src="[Link]">
</script>
A c
</body>

</html>
©

H & H: Research and Training 23 / 62

 Solution avec CDN

[Link]

On peut aussi choisir un autre hébergeur (cdnjs par exemple)

H
[Link] ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 24 / 62

 Solution avec CDN

[Link]

On peut aussi choisir un autre hébergeur (cdnjs par exemple)

H
[Link] ©
UEL
L MO
Ou (jsdelivr)
h re fE
A c
[Link]
©

H & H: Research and Training 24 / 62

 Solution avec CDN

Spécifions la zone de la page où l’application [Link] sera chargée

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cours [Link]</title>
H I ©
UEL
</head>

MO
<body>
<div id='app'>
{{ message }}
</div>
fE L
c h re
<script src="[Link]
<script src="[Link]">
</script>
</body> © A
</html>

H & H: Research and Training 25 / 62

 Solution avec CDN

Ajoutons le contenu suivant dans [Link]

const App = [Link]({

data() {
return {
message: "Hello world"
};
}
});
[Link]('#app');
H I ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 26 / 62

 Solution avec CDN

Ajoutons le contenu suivant dans [Link]

const App = [Link]({

data() {
return {
message: "Hello world"
};
}
});
[Link]('#app');
H I ©
UEL
L MO
Explication

h re fE
c
Vue : une classe [Link] prédéfinie chargée depuis la CDN
A
©
createApp() : méthode permettant de créer une application [Link]
data() : fonction permettant de retourner des données affichées souvent dans la zone
d’application
message : une variable contenant la valeur Hello world
[Link](’#app’) : méthode permettant de charger l’application [Link] dans
l’élément HTML ayant l’identifiant app

H & H: Research and Training 26 / 62

 Solution avec CDN

[Link]

Pour tester, utilisons l’extension Live Server

H I ©
UEL
Installez l’extension Live Server

MO
Faites un clic doit sur [Link]
L
Cliquez sur Open with
r e f E
Live Server
c h
© A de Hello world
Vérifiez l’affichage

H & H: Research and Training 27 / 62

 Solution avec CDN

[Link]

La version utilisant ES Modules

H I ©
import { createApp } from '[Link]

createApp({
UEL
MO
data() {
return {

};
message: "Hello world"

fE L
}
}).mount('#app')
c h re
© A

H & H: Research and Training 28 / 62

 Solution avec CDN

[Link]

Et l’attribut type="module" dans la balise script

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="UTF-8">
H I ©
UEL
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cours [Link]</title>

MO
</head>

<body>
<div id='app'>
fE L
{{ message }}
</div>
c h re
© A
<script src="[Link]" type="module">
</script>
</body>

</html>

H & H: Research and Training 29 / 62

 Solution avec CDN

[Link]

Solution avec CDN : limites

H I ©
U L .vue)
El’extension
MO
Impossible de compiler le code (pas de fichier avec

Impossible de créer et importerE

f L
des composants

c h r e
©A

H & H: Research and Training 30 / 62

 Solution avec Vite

[Link]

Vite

Outil de développement web léger et rapide

Générateur de projet front-end

H I ©
Créé par Evan you (Créateur de [Link])
UEL
L MO
fE
Conçu, initialement, pour accélérer le processus de développement des

c h re
applications [Link]

Open-source A
©
Prenant en charge les langages JavaScript et TypeScript

Intégrant plusieurs frameworks et librairies : [Link], [Link], Vanilla, Svelte...

H & H: Research and Training 31 / 62

 Solution avec Vite

[Link]
Relation avec esbuild Rollup

Vite est un outil de build moderne pour le développement frontend.

Il utilise deux moteurs :

H I ©
UEL
esbuild pour le développement (serveur rapide, transpilation JS/TS).
Rollup pour le build de production.

L MO
h re fE
Vite agit comme une surcouche de haut niveau qui cache la complexité de Rollup.

c
Rollup gère la génération des bundles finaux, avec un système de plugins très modulable.
A
©
Résumé

Vite = esbuild (dev) + Rollup (build prod)

H & H: Research and Training 32 / 62

 Solution avec Vite

[Link]

HMR : Hot Module Reloading

Fonctionnalité de Vite
H I ©
U EL apportées à leur
MO la page du navigateur
Permettant de voir instantanément les modifications

f L
code sans avoir à rafraîchir manuellement
Eassurer une navigation bidirectionnelle
r e
cdehdéveloppement (fourni par des outils comme Vite,
Utilisant les WebSocket pour
A
entre le serveur
© et le navigateur
Webpack...)

H & H: Research and Training 33 / 62

 Solution avec Vite

[Link]

Vite : un moteur adopté par les frameworks modernes

Nuxt 3 (depuis 2022) supporte Vite nativement.

H I ©
React : utilisation courante avec vite + react U EL
(vite-plugin-react).

SvelteKit : utilise Vite par défaut L

MO
r e f E depuis sa création (2022).

A ch
SolidJS : avec SolidStart qui repose entièrement sur Vite.

... ©

H & H: Research and Training 34 / 62

 Solution avec Vite

[Link]

Même Angular s’y met

Angular 17 (novembre 2023)

H I ©
Introduit @angular/cli vite comme moteur de
U ELbuild alternatif.
MO et un HMR natif performant.
Objectif : un serveur de dev plus rapide,
L
@angular/build (2024)
r e f E
NouveauA
ch
© pipeline de build basé sur Vite et esbuild.
Devient la future base par défaut pour Angular CLI (Angular 18+).

H & H: Research and Training 35 / 62

 Solution avec Vite

[Link]

Pourquoi ce choix ?

Webpack devenu trop lourd et lent à maintenir.

H I ©
UEL
La communauté JavaScript s’oriente vers des outils plus simples et
performants.

L MO
h re fE
A c
©

H & H: Research and Training 36 / 62

 Solution avec Vite

[Link]

Pourquoi ce choix ?

Webpack devenu trop lourd et lent à maintenir.

H I ©
UEL
La communauté JavaScript s’oriente vers des outils plus simples et
performants.

L MO
h re fE
A c
Par conséquence
©
Vite s’impose comme un standard moderne, même dans les frameworks
historiquement liés à Webpack.

H & H: Research and Training 36 / 62

 Solution avec Vite Installation

[Link]
Remarque

Pour installer [Link], il faut télécharger et installer [Link] (Dernière version stable LTS)

H I ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 37 / 62

 Solution avec Vite Installation

[Link]
Remarque

Pour installer [Link], il faut télécharger et installer [Link] (Dernière version stable LTS)

H I ©
Pour [Link], il faut
UEL
L MO
fE
aller sur [Link]

c h re
choisir une version récente, télécharger et installer

© A

H & H: Research and Training 37 / 62

 Solution avec Vite Installation

[Link]
Remarque

Pour installer [Link], il faut télécharger et installer [Link] (Dernière version stable LTS)

H I ©
Pour [Link], il faut
UEL
L MO
fE
aller sur [Link]

c h re
choisir une version récente, télécharger et installer

© A
Pour vérifier l’installation depuis une console (invite de commandes), exécutez

node -v

H & H: Research and Training 37 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Remarque
H I ©
U EL différentes.
O
Pour créer un projet avec Vite, il existe trois commandes
M
f E L
Nous utiliserons la dernière commande qui génère moins de composants

chr e
© A

H & H: Research and Training 38 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Première commande, exécuter la commande

npm init vue@latest H I ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 39 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Première commande, exécuter la commande

npm init vue@latest H I ©
UEL
L MO
h re fE
c
Deuxième commande, exécuter la commande
A
©
npm create vue@latest

H & H: Research and Training 39 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Et ensuite, répondre aux différentes questions ainsi

[Link] - The Progressive JavaScript Framework

√
√ Project name: ... vue-vite
√ Add TypeScript? ... No / Yes
H I ©
UEL
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes

MO
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes

fE L
√ Add an End-to-End Testing Solution? ... No / Yes / Cypress / Playwright
√ Add ESLint for code quality? ... No / Yes

c h re
Add Prettier for code formatting? ... No / Yes

Done. Now run: © A

Scaffolding project in <chemin-projet>

cd vue-vite
npm install
npm run dev

H & H: Research and Training 40 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

Troisième commande, exécuter la commande

npm init vite@latest

H I ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 41 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

Troisième commande, exécuter la commande

npm init vite@latest

Ensuite

H I ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 41 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

Troisième commande, exécuter la commande

npm init vite@latest

Ensuite

H I ©
UEL
L MO
h re fE
A c
Et enfin
©

H & H: Research and Training 41 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Ouvrez le dossier vue-vite avec VSC et installez les

dépendances avec
H I ©
UEL
npm install

L MO
h re fE
A c
©

H & H: Research and Training 42 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Ouvrez le dossier vue-vite avec VSC et installez les

dépendances avec
H I ©
UEL
npm install

L MO
h re fE
A c
Pour lancer l’application, exécutez
npm run dev
©

H & H: Research and Training 42 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Arborescence d’un projet [Link]

node_modules : contenant les fichiers [Link] nécessaires pour un projet [Link]

src : contenant les fichiers sources de l’application

H I ©
UEL
MO
[Link] : contenant l’ensemble de dépendance de l’application

fE L
public : contenant les fichiers statiques à intégrer systématiquement dans dist

h re
[Link] : fichier de configuration de Vite pour un projet [Link])
c
© A
[Link] : point d’entrée de l’application

[Link] : permet de fournir une vue d’ensemble de l’application, décrire son objectif et
expliquer les fonctionnalités principales.

H & H: Research and Training 43 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Si vous aviez choisi TypeScript comme langage, vous auriez

H I ©
[Link] : fichier de configuration principal pour TypeScript pouvant contenir les

UEL
paramètres de compilation, les chemins d’inclusion et d’exclusion, les options de module...

MO
[Link] : fichier spécifique à l’application Vue pouvant contenir des
L
fE
propriétés comme chemins d’importation, les options de type...

h re
[Link] : fichier de configuration permettant d’activer des fonctionnalités
c
ECMAScript...© A
TypeScript spécifiques à [Link], comme les modules CommonJS, les cibles

H & H: Research and Training 44 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Que contient src ?

assets : contenant les fichiers statiques à intégrer dans dist s’ils sont explicitement
référencés dans le projet

H I ©
UEL
components : contient trois composants prédéfinis

MO
[Link]
[Link]
fE L
h re
[Link] : composant référencé par [Link]
c
© A
[Link] (ou [Link]) : fichier référencé par [Link] et permettant de charger
l’application [Link] dans l’élément ayant l’identifiant app

[Link] : fichier référencé par [Link] et utilisant les deux composants

[Link] et [Link]

H & H: Research and Training 45 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Contenu d’[Link]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
H I ©
UEL
<link rel="icon" href="/[Link]" />

MO
<meta name="viewport" content="width=device-width, initial-scale
=1.0" />
<title>Vite App</title>
fE L
</head>
<body>
c h re
©
<div id="app"></div> A
<script type="module" src="/src/[Link]"></script>
</body>
</html>

H & H: Research and Training 46 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Contenu de src/[Link]
import { createApp } from 'vue'
H I ©
import './[Link]'
UEL
import App from './[Link]'
L MO
h re fE
c
©A
createApp(App).mount('#app')

H & H: Research and Training 47 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Pourquoi importer [Link] dans [Link] ?

[Link] sert uniquement de point d’entrée analysé par Vite.

H I ©
UEL
[Link] devient le vrai point de départ du bundle.

Importer le CSS dans [Link] permet :

L MO
r e f E de ES modules
d’intégrer le style au système
de bénéficierc
A hoptimisations de Vite (minification, cache...).
des
©
Ajouter le CSS dans [Link] (<link>) contourne le build et est
déconseillé.

H & H: Research and Training 48 / 62

 Solution avec Vite Création et structure d’un projet créé avec Vite

[Link]

Résumé

Approche Fichier Recommandée ?

H I ©
U EL
<link rel="stylesheet" ...> [Link] Non
M O
f E L
c h r
import ’./[Link]’e [Link] Oui

©A

Vite gère le CSS comme une dépendance du projet.

H & H: Research and Training 49 / 62

 Solution avec CLI Installation

[Link]

Pour installer Vue/CLI, exécuter la commande

npm install -g @vue/cli

H I ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 50 / 62

 Solution avec CLI Installation

[Link]

Pour installer Vue/CLI, exécuter la commande

npm install -g @vue/cli

H I ©
UEL
MO
Pour vérifier la version d’Vue/CLI installée, exécuter la commande
L
vue -version
h re fE
A c
©

H & H: Research and Training 50 / 62

 Solution avec CLI Installation

[Link]

Pour installer Vue/CLI, exécuter la commande

npm install -g @vue/cli

H I ©
UEL
MO
Pour vérifier la version d’Vue/CLI installée, exécuter la commande
L
vue -version
h re fE
A c
©
Ou
vue -V

H & H: Research and Training 50 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]

Pour créer un nouveau projet [Link] avec CLI

>vue create vue-cli

Vue CLI v5.0.8 ? Please pick a preset: (Use arrow keys)

> Default ([Vue 3] babel, eslint)
H I ©
UEL
Default ([Vue 2] babel, eslint)

MO
Manually select features

Running completion hooks...

fE L
c h re
Generating [Link]...
© A
Successfully created project cours-vue-cli.
Get started with the following commands:

$ cd vue-cli
$ npm run serve

H & H: Research and Training 51 / 62

 Solution avec CLI Création et structure d’un projet CLI

Ensuite, placez vous dans le dossier cours-vue-cli

cd vue-cli

H I ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 52 / 62

 Solution avec CLI Création et structure d’un projet CLI

Ensuite, placez vous dans le dossier cours-vue-cli

cd vue-cli

Ouvrez le dossier cours-vue-cli avec VSC

H I ©
UEL
code .

L MO
h re fE
A c
©

H & H: Research and Training 52 / 62

 Solution avec CLI Création et structure d’un projet CLI

Ensuite, placez vous dans le dossier cours-vue-cli

cd vue-cli

Ouvrez le dossier cours-vue-cli avec VSC

H I ©
UEL
code .

L MO
h
Pour lancer l’application, exécutez re fE
A c
npm run serve
©

H & H: Research and Training 52 / 62

 Solution avec CLI Création et structure d’un projet CLI

Ensuite, placez vous dans le dossier cours-vue-cli

cd vue-cli

Ouvrez le dossier cours-vue-cli avec VSC

H I ©
UEL
code .

L MO
h
Pour lancer l’application, exécutez re fE
A c
npm run serve
©
Ou

vue serve

H & H: Research and Training 52 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]

Arborescence d’un projet [Link]

node_modules : contenant les fichiers [Link] nécessaires pour un projet [Link]

src : contenant les fichiers sources de l’application

H I ©
UEL
[Link] : contenant l’ensemble de dépendance de l’application

MO
public : contenant le point d’entrée de l’application [Link]
L
h re fE
[Link] : fichier chargeant les services de Vue-CLI

A c
©
[Link] : fichier de configuration principal pour TypeScript (Si vous avez choisi
TypeScript comme langage)

[Link] : permet de fournir une vue d’ensemble de l’application, décrire son objectif et
expliquer les fonctionnalités principales.

H & H: Research and Training 53 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]

Que contient src ?

H I ©
UEL
assets : unique dossier accessible aux visiteurs et contenant logo, CSS, images, sons...

MO
components : contient un composant [Link]

fE L
[Link] (ou [Link]) : point d’entrée de Webpack permettant de charger l’application

c h re
[Link] dans l’élément ayant l’identifiant app

A
[Link] : fichier référencé par [Link] et utilisant le composant [Link]
©

H & H: Research and Training 54 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]

Question

Où faut-il placer les fichiers statiques d’une application [Link], dans public ou dans assets ?

H I ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 55 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]

Question

Où faut-il placer les fichiers statiques d’une application [Link], dans public ou dans assets ?

H I ©
UEL
L MO
Explication

h re fE
c
src/assets pour les fichiers à intégrer dans le graphe de dépendances : images, feuilles
A
©
de style... Ils sont traités (compression, renommage, hash) par le bundler.

public pour les fichiers accessibles directement tels quels, sans traitement par le bundler
(favicon, [Link], images fixes...).

H & H: Research and Training 55 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]

Réponse

Placez dans assets tout fichier que vous souhaitiez qu’il bénéficie des fonctionnalités

H I ©
d’optimisation de Webpack (compression, hashage...) lors de la construction (build).

UEL
Utilisez public pour les fichiers statiques accessibles tels quels après le build.

L MO
h re fE
A c
©

H & H: Research and Training 56 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]

Réponse

Placez dans assets tout fichier que vous souhaitiez qu’il bénéficie des fonctionnalités

H I ©
d’optimisation de Webpack (compression, hashage...) lors de la construction (build).

UEL
Utilisez public pour les fichiers statiques accessibles tels quels après le build.

L MO
h re fE
Remarques
A c
©
Un fichier [Link] placé dans assets peut être référencé ./assets/[Link].

Un fichier [Link] placé dans public peut être référencé directement /[Link].

H & H: Research and Training 56 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]

Contenu d’[Link]

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
H I ©
UEL
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>[Link]">

MO
<title><%= [Link] %></title>
</head>
<body>
<noscript>
fE L
c h re
<strong>We're sorry but <%= [Link] %> doesn't work
properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>

©
<div id="app"></div> A
<!-- built files will be auto injected -->
</body>
</html>

H & H: Research and Training 57 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]

Contenu de src/[Link]
H I ©
import { createApp } from 'vue'
import App from './[Link]' OU
EL
L M
r e f E
h
createApp(App).mount('#app')
c
©A

H & H: Research and Training 58 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]

Vue avec CLI Vue avec Vite

Temps de démarrage plus long (dev et build)

H ©
Démarrage ultra rapide
I
UEL
Basé sur WebPack (config plus complexe mais Utilisant ESBuild (dev) et Rollup
flexible) (build)

L
Code généré compatible avec tous les MO
navigateurs anciens/modernes
fE Code ciblant uniquement les

chre
navigateurs modernes

©A
Recommandé pour les grands projets
Initialement pensé pour petits
projets, mais désormais utilisé à
grande échelle

H & H: Research and Training 59 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]
Remarque

Depuis quelques mois, on recommande de ne plus utiliser vue-cli et d’utiliser Vite

H I ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 60 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]
Remarque

Depuis quelques mois, on recommande de ne plus utiliser vue-cli et d’utiliser Vite

H I ©
UEL
Documentation officielle : [Link]

L MO
h re fE
A c
©

H & H: Research and Training 60 / 62

 Solution avec CLI Création et structure d’un projet CLI

[Link]
Remarque

Depuis quelques mois, on recommande de ne plus utiliser vue-cli et d’utiliser Vite

H I ©
UEL
Documentation officielle : [Link]

L MO
h re fE
A c
©
Pour migrer de vue-cli vers Vite

[Link]
how-to-migrate-from-vue-cli-to-vite/

H & H: Research and Training 60 / 62

 Commandes utiles

[Link]

Pour désinstaller [Link]

npm uninstall vue-cli -g

H I ©
UEL
L MO
h re fE
A c
©

H & H: Research and Training 61 / 62

 Commandes utiles

[Link]

Pour désinstaller [Link]

npm uninstall vue-cli -g

H I ©
UEL
MO
Pour vider le cache (Avant la version 5 de npm)
L
npm cache clean
h re fE
A c
©

H & H: Research and Training 61 / 62

 Commandes utiles

[Link]

Pour désinstaller [Link]

npm uninstall vue-cli -g

H I ©
UEL
MO
Pour vider le cache (Avant la version 5 de npm)
L
npm cache clean
h re fE
A c
©
Pour vider le cache (depuis la version 5 de npm)
npm cache verify

H & H: Research and Training 61 / 62

 Commandes utiles

[Link]

H I ©
Pour mettre à jour la version de [Link]
UEL
npm update -g @vue/cli
L MO
h re fE
A c
©

H & H: Research and Training 62 / 62