Les premiers pas
Vue (prononcé /vju:/, comme view) est un cadre d'application JavaScript pour la création d'interfaces utilisateur. Il s'appuie sur les standards HTML, CSS et JavaScript et fournit un modèle de programmation déclaratif basé sur des composantes vous aidant à développer efficacement des interfaces utilisateur de toute complexité.
Voici un exemple minimal (le code source JavaScript) :
- import { createApp, ref } from "vue"
-
- createApp({
- setup() {
- return {
- count: ref(0)
- }
- }
- }).mount("#app")
Puis le code source HTML :
Le résultat obtenir ressemblera à ceci :
L'exemple ci-dessus illustre les deux fonctionnalités principales de Vue.js :
- Rendu déclaratif : Vue étend le HTML standard avec une syntaxe de modèle nous permettant de décrire de manière déclarative la sortie HTML en fonction de l'état JavaScript.
- Réactivité : Vue suit automatiquement les changements d'état JavaScript et met à jour efficacement le DOM lorsque des changements se produisent.
Le cadre d'application progressif
Vue.js est un cadre d'application et un écosystème couvrant la plupart des fonctionnalités courantes nécessaires au développement front-end. Mais le Web est extrêmement diversifié : les éléments que nous construisons sur le Web peuvent varier considérablement en termes de forme et d'échelle. Dans cet esprit, Vue.js est conçu pour être flexible et progressivement adoptable. Selon votre cas d'utilisation, Vue.js peut être utilisé de différentes manières :
- Amélioration du HTML statique sans étape de construction.
- Intégration en tant que composantes Web sur n'importe quelle page.
- Application monopage (SPA).
- Fullstack / Rendu côté serveur (SSR)
- Jamstack / Génération de sites statiques (SSG)
- Ciblage des ordinateurs de bureau, des mobiles, de WebGL et même du terminal.
Composantes à fichier unique
Dans la plupart des projets Vue.js compatibles avec les outils de création, on crée des composantes Vue.js à l'aide d'un format de fichier de type HTML appelé composante à fichier unique (également connu sous le nom de fichiers *.vue, abrégé en SFC). Un SFC Vue, comme son nom l'indique, encapsule la logique de la composante (JavaScript), le modèle (HTML) et les styles (CSS) dans un seul fichier. Voici l'exemple précédent, écrit au format SFC :
- <script setup>
- import { ref } from 'vue'
- const count = ref(0)
- </script>
-
- <template>
- <button @click="count++">Compteur est : {{ count }}</button>
- </template>
-
- <style scoped>
- button {
- font-weight: bold;
- }
- </style>
SFC est une fonctionnalité déterminante de Vue.js et constitue la méthode recommandée pour créer des composantes Vue.js si votre cas d'utilisation justifie une configuration de build. Vous pouvez en apprendre davantage sur le comment et le pourquoi de SFC dans sa section dédiée - mais pour l'instant, sachez simplement que Vue.js gérera toute la configuration des outils de build pour vous.
Styles d'API
Les composantes Vue.js peuvent être créés dans deux styles d'API différents : API d'options et API de composition.
API d'options
Avec l'API d'options, vous définissez la logique d'une composante à l'aide d'un objet d'options telles que des données, des méthodes et des éléments montés. Les propriétés définies par les options sont exposées à l'intérieur de ces fonctions, pointant vers l'instance de la composante :
- <script>
- export default {
- /* Les propriétés renvoyées par data() deviennent un état réactif et seront exposées sur «this». */
- data() {
- return {
- count: 0
- }
- },
-
- /* Les méthodes sont des fonctions qui modifient l'état et déclenchent des mises à jour. Elles peuvent être liées en tant que gestionnaires d'événements dans les modèles. */
- methods: {
- increment() {
- this.count++
- }
- },
-
- /* Les crochets de cycle de vie sont appelés à différentes étapes du cycle de vie d'une composante. Cette fonction sera appelée lorsque le composant sera monté. */
- mounted() {
- console.log("Le décompte initial est ${this.count}.")
- }
- }
- </script>
-
- <template>
- <button @click="increment">Compteur est: {{ count }}</button>
- </template>
API de composition
Avec l'API de composition, nous définissons la logique d'une composante à l'aide de fonctions API importées. Dans les SFC, l'API de composition est généralement utilisée avec <script setup>. L'attribut setup est une astuce permettant à Vue.js d'effectuer des transformations au moment de la compilation nous permettant d'utiliser l'API de composition avec moins de code standard. Par exemple, les importations et les variables/fonctions de niveau supérieur déclarées dans <script setup> sont directement utilisables dans le modèle.
Voici la même composante, avec exactement le même modèle, mais en utilisant l'API de composition et <script setup> à la place :
- <script setup>
- import { ref, onMounted } from 'vue'
-
- /* état réactif */
- const count = ref(0)
-
- /* fonctions modifiant l'état et déclenchent des mises à jour */
- function increment() {
- count.value++
- }
-
- /* crochets de cycle de vie */
- onMounted(() => {
- console.log("Le décompte initial est ${count.value}.")
- })
- </script>
-
- <template>
- <button @click="increment">Compteur est: {{ count }}</button>
- </template>
Lequel choisir ?
Les deux styles d'API sont entièrement capables de couvrir les cas d'utilisation courants. Ce sont des interfaces différentes alimentées par le même système sous-jacent. En fait, l'API d'options est implémentée sur l'API de composition ! Les concepts fondamentaux et les connaissances sur Vue.js sont partagés entre les deux styles.
L'API d'options est centrée sur le concept d'une «instance de composante» (comme le montre l'exemple), s'alignant généralement mieux sur un modèle mental basé sur les classes pour les utilisateurs issus de milieux de langage de programmation POO. Elle est également plus conviviale pour les débutants en faisant abstraction des détails de réactivité et en appliquant l'organisation du code via des groupes d'options.
L'API de composition est centrée sur la déclaration de variables d'état réactives directement dans une portée de fonction et la composition d'état à partir de plusieurs fonctions pour gérer la complexité. Elle est plus libre et nécessite une compréhension du fonctionnement de la réactivité dans Vue pour être utilisée efficacement. En retour, sa flexibilité permet des modèles plus puissants pour organiser et réutiliser la logique.
Si vous débutez avec Vue.js, voici la recommandation générale :
- À des fins d'apprentissage, optez pour le style vous semblant le plus facile à comprendre. Encore une fois, la plupart des concepts de base sont partagés entre les deux styles. Vous pourrez toujours choisir l'autre style plus tard.
Pour une utilisation en production :
- Optez pour l'API d'options si vous n'utilisez pas d'outils de création ou si vous prévoyez d'utiliser Vue principalement dans des scénarios peu complexes, par exemple une amélioration progressive.
- Optez pour l'API de composition + les composantes à fichier unique si vous prévoyez de créer des applications complètes avec Vue.js.
Vous n'êtes pas obligé de vous engager dans un seul style pendant la phase d'apprentissage. Le reste de la documentation fournira des exemples de code dans les deux styles, le cas échéant, et vous pourrez basculer entre eux à tout moment à l'aide des commutateurs de préférences API en haut de la barre latérale gauche.
Créer une application Vue.js
Dans cette section, nous allons vous présenter comment créer une application monopage Vue sur votre machine locale. Le projet créé utilisera une configuration de build basée sur Vite et nous permettra d'utiliser les composantes monofichiers Vue (SFC).
Assurez-vous que vous disposez d'une version à jour de Node.js installée et que votre répertoire de travail actuel est celui dans lequel vous avez l'intention de créer un projet. Exécutez la commande suivante dans votre ligne de commande selon votre préférence.
Si vous utilisez npm, exécuter la commande suivante :
npm create vue@latest |
Ou si vous utilisez pnpm, exécuter la commande suivante :
pnpm create vue@latest |
Ou si vous utilisez Yarn, exécuter les commande suivante :
# Pour Yarn (v1+) yarn create vue # Pour Yarn Modern (v2+) yarn create vue@latest # Pour Yarn ^v4.11 yarn dlx create-vue@latest |
Ou enfin si vous utilisez Bun, exécuter les commande suivante :
bun create vue@latest |
Une de ces commandes va installer et exécuter create-vue, l'outil officiel de création d'échafaudages du projet Vue.js. Des prompts vous seront présentées pour plusieurs fonctionnalités facultatives telles que TypeScript et la prise en charge des tests :
√ Project name: ... <votre-nom-de-projet> √ 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 / Cypress / Nightwatch / Playwright √ Add ESLint for code quality? ... No / Yes √ Add Prettier for code formatting? ... No / Yes √ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes Scaffolding project in ./<votre-nom-de-projet>... Done. |
Si vous n'êtes pas sûr d'une option, choisissez simplement Non en appuyant sur Enter pour l'instant. Une fois le projet créé, suivez les instructions pour installer les dépendances et démarrer le serveur de développement. Exécuter la commande suivante pour npm :
cd <votre-nom-de-projet> npm install npm run dev |
Ou si vous utilisez pnpm, exécuter la commande suivante :
cd <votre-nom-de-projet> pnpm install pnpm run dev |
Ou si vous utilisez Yarn, exécuter les commande suivante :
cd <votre-nom-de-projet> yarn yarn dev |
Ou enfin si vous utilisez Bun, exécuter les commande suivante :
cd <votre-nom-de-projet> bun install bun run dev |
Vous devriez maintenant avoir votre premier projet Vue.js en cours d'exécution ! Notez que les composantes d'exemple dans le projet généré sont écrits à l'aide de l'API de composition et de <script setup>, plutôt que de l'API d'options. Voici quelques conseils supplémentaires :
- La configuration IDE recommandée est Visual Studio Code + Vue.js - Extension officielle. Si vous utilisez d'autres éditeurs, consultez la section sur la prise en charge de l'IDE.
- Si vous choisissez d'utiliser TypeScript, consultez la section TypeScript.
Lorsque vous êtes prêt à envoyer votre application en production, exécutez l'une des commandes suivantes. Exécuter la commande suivante pour npm :
npm run build |
Ou si vous utilisez pnpm, exécuter la commande suivante :
pnpm run build |
Ou si vous utilisez Yarn, exécuter les commande suivante :
yarn build |
Ou enfin si vous utilisez Bun, exécuter les commande suivante :
bun run build |
Cela créera une version de votre application prête pour la production dans le répertoire ./dist du projet.
Utilisation de Vue.js depuis un CDN
Vous pouvez utiliser Vue.js directement depuis un CDN via une balise de script :
Ici, nous utilisons unpkg, mais vous pouvez également utiliser n'importe quel CDN servant des paquets npm, par exemple jsdelivr ou cdnjs. Bien sûr, vous pouvez également télécharger ce fichier et le servir vous-même.
Lorsque vous utilisez Vue.js à partir d'un CDN, aucune «étape de construction» n'est impliquée. Cela simplifie considérablement la configuration et convient à l'amélioration du HTML statique ou à l'intégration avec un cadre d'application backend. Cependant, vous ne pourrez pas utiliser la syntaxe Single-File Component (SFC).
Utilisation de la version globale
Le lien ci-dessus charge la version globale de Vue.js, où toutes les API de niveau supérieur sont exposées en tant que propriétés sur l'objet Vue.js global. Voici un exemple complet utilisant la version globale :
Utilisation de la construction de modules ES
Tout au long du reste de la page, on utiliserons principalement la syntaxe des modules ES. La plupart des navigateurs modernes prennent désormais en charge les modules ES de manière native, nous pouvons donc utiliser Vue.js à partir d'un CDN via des modules ES natifs comme celui-ci :
Notez que nous utilisons <script type="module"> et que l'URL CDN importée pointe vers la version des modules ES de Vue.js à la place.
Activation de l'importation de cartes
Dans l'exemple ci-dessus, nous importons à partir de l'URL CDN complète, mais dans le reste de la page, vous verrez un code comme celui-ci :
- import { createApp } from "vue"
Nous pouvons apprendre au navigateur où localiser l'importation de Vue.js en utilisant Import Maps :
- <script type="importmap">
- {
- "imports": {
- "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
- }
- }
- </script>
-
- <div id="app">{{ message }}</div>
-
- <script type="module">
- import { createApp, ref } from 'vue'
-
- createApp({
- setup() {
- const message = ref('Bonjour Vue.js!')
- return {
- message
- }
- }
- }).mount('#app')
- </script>
Vous pouvez également ajouter des entrées pour d'autres dépendances à la carte d'importation, mais assurez-vous qu'elles pointent vers la version des modules ES de la bibliothèque que vous avez l'intention d'utiliser.
- Prise en charge du navigateur pour l'importation de cartes : L'importation de cartes est une fonctionnalité de navigateur relativement nouvelle. Assurez-vous d'utiliser un navigateur dans sa plage de prise en charge. En particulier, il n'est pris en charge que dans Safari 16.4+.
- Remarques sur l'utilisation en production : Les exemples jusqu'à présent utilisent la version de développement de Vue.js. Si vous avez l'intention d'utiliser Vue.js à partir d'un CDN en production, assurez-vous de consulter le Guide de déploiement en production. Bien qu'il soit possible d'utiliser Vue.js sans système de build, une approche alternative à envisager consiste à utiliser vuejs/petite-vue pouvant mieux convenir au contexte où jquery/jquery (dans le passé) ou alpinejs/alpine (dans le présent) pourraient être utilisés à la place.
Séparation des modules
Au fur et à mesure que nous approfondissons la page, nous devrons peut-être diviser notre code en fichiers JavaScript distincts afin qu'ils soient plus faciles à gérer. Par exemple, le code HTML suivant :
Avec le code source JavaScript suivant :
Si vous ouvrez directement l'index.html ci-dessus dans votre navigateur, vous constaterez qu'il génère une erreur car les modules ES ne peuvent pas fonctionner sur le protocole file://, étant le protocole utilisé par le navigateur lorsque vous ouvrez un fichier local.
Pour des raisons de sécurité, les modules ES ne peuvent fonctionner que sur le protocole http://, étant celui utilisé par les navigateurs lors de l'ouverture de pages sur le Web. Pour que les modules ES fonctionnent sur notre machine locale, nous devons servir l'index.html sur le protocole http://, avec un serveur HTTP local.
Pour démarrer un serveur HTTP local, assurez-vous d'abord que Node.js est installé, puis exécutez npx serve à partir de la ligne de commande dans le même répertoire où se trouve votre fichier HTML. Vous pouvez également utiliser n'importe quel autre serveur HTTP capable de servir des fichiers statiques avec les types MIME corrects.
Vous avez peut-être remarqué que le modèle du composant importé est intégré en tant que chaîne JavaScript. Si vous utilisez VS Code, vous pouvez installer l'extension es6-string-html et préfixer les chaînes avec un commentaire /*html*/ pour obtenir la coloration syntaxique pour elles.