Démarrage rapide #

En ligne #

• Pour vous familiariser rapidement avec Vue, vous pouvez l'essayer directement dans notre Playground.

• Si vous préférez une configuration HTML simple sans outil de build, vous pouvez utiliser JSFiddle comme point de départ.

• Si vous êtes déjà familiarisé avec Node.js et le concept des outils de construction, vous pouvez également essayer une configuration de build complète directement dans votre navigateur sur StackBlitz.

Créer une application Vue #

Dans cette section, nous allons vous présenter comment créer une Single Page Application avec Vue sur votre machine locale. Le projet créé utilisera une configuration de build basée sur Vite et nous permettra d'utiliser les composants monofichiers (SFCs).

Assurez-vous d'avoir une version à jour de Node.js d'installée, ensuite exécutez la commande suivante dans votre invite de commandes (sans le symbole >) :

> npm init vue@latest

Cette commande installera et exécutera create-vue, l'outil officiel de création de projets Vue. Des questions (en anglais) vous seront posées pour un certain nombre de fonctionnalités optionnelles telles que la prise en charge de TypeScript et des tests :

✔ Project name: … <your-project-name>
✔ 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 Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Si vous n'êtes pas sûr d'une option, choisissez simplement No en appuyant sur entrée pour le moment. Une fois le projet créé, suivez les instructions pour installer les dépendances et démarrer le serveur de développement :

> cd <votre-nouveau-projet>
> npm install
> npm run dev

Vous devriez maintenant avoir votre premier projet Vue en cours d'exécution ! Notez que les composants d'exemple dans le projet généré sont écrits avec la Composition API et <script setup>, plutôt que l'Options API. Voici quelques conseils supplémentaires :

• L'IDE recommandé est [Visual Studio Code] (https://code.visualstudio.com/) + Volar extension. [Si vous utilisez d'autres éditeurs, lisez la section support IDE.
• Guide - Outils fournit plus de détails sur l'outillage, notamment sur l'intégration avec les frameworks back-end.
• Pour en savoir plus sur l'outil de compilation Vite, consultez la documentation Vite.
• Si vous avez chooisi d'utiliser TypeScript, consultez le Guide d'utilisation de TypeScript.

Dès que vous êtes prêts à livrer votre application en production, exécutez la commande suivante :

> npm run build

Cela créera une version de votre application prête pour la production dans le répertoire ./dist du projet. Consultez le Guide du déploiement en production pour en savoir plus sur l'envoi de votre application en production.

Etapes suivantes >

Utiliser Vue depuis un CDN #

Vous pouvez utiliser Vue directement depuis un CDN via une balise script :

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

Ici nous utilisons unpkg, mais vous pouvez utiliser tout autre CDN qui sert des paquets NPM, par exemple jsdelivr ou cdnjs. Bien évidement, vous pouvez également télécharger le fichier pour le servir par vous-même.

Lorsque Vue est utilisé depuis un CDN, aucun outil de build n'est nécessaire. Cela permet d'avoir une configuration plus simple, et plus adapté pour enrichir du HTML statique ou d'intégrer un framework backend. Par contre, vous n'aurez pas la possibilité de bénéficier de la syntaxe des components monofichiers (SFC).

Utiliser le build global #

Le lien au-dessus charge le build global de Vue, où toutes les API haut-niveau sont exposées comme des propriétés sur l'object global Vue. Ci-dessous, un exemple utilisant le build global :

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

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

JSFiddle demo

Utiliser le buiES Module Build #

Bien que le build global fonctionne, nous utiliserons principalement la syntaxe des modules ES dans le reste de la documentation par souci de cohérence. La plupart des navigateurs supportant désormais les modules ES nativement, nous pouvons utiliser Vue depuis un CDN via les modules ES natifs :

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Notez que nous utilisant <script type="module">, et que l'url CRN importée pointe vers le build des modules ES de Vue.

JSFiddle demo

Activer l'Import maps #

Dans l'exemple ci-dessus, nous importons depuis l'URL CDN complète, mais dans le reste de la documentation, vous verrez un code comme celui-ci :

const { createApp, ref } = Vue

Nous pouvons dire au navigateur où trouver l'import vue par l'usage de l'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 } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

JSFiddle demo

Vous pouvez ajouter des entrées pour d'autres dépendances à l'Import Map, assurez-vous simplement qu'elles pointent vers la version des modules ES de la bibliothèque que vous avez l'intention d'utiliser.

Séparation des modules #

Au fur et à mesure que nous progressons dans le guide, il se peut que nous devions diviser notre code en plusieurs fichiers JavaScript distincts afin d'en faciliter la gestion. Par exemple :

<!-- index.html -->
<script type="module">
  import { createApp } from 'vue'
  import MyComposant from './my-composant.js'

  createApp(MyComposant).mount('#app')
</script>

// my-composant.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

Si vous tentez d'ouvrir le fichier index.html ci-dessus dans votre navigateur, vous trouverez des erreurs relevés parce que les modules ES ne peuvent fonctionner via le protocol file://. Pour pouvoir fonctionner, vous devez servir votre index.html sur le protocole http://, avec un serveur HTTP local.

Pour démarrer un serveur HTTP local, installez d'abord Node.js, puis exécutez npx serve depuis la ligne de commande dans le même répertoire que votre fichier HTML. Vous pouvez également utiliser n'importe quel autre serveur HTTP qui peut servir des fichiers statiques avec les types MIME corrects.

Vous avez peut-être remarqué que le template du composant importé est souligné comme une chaîne JavaScript. Si vous utilisez VSCode, vous pouvez installer l'extension es6-string-html et préfixer les chaînes avec un commentaire /*html*/ pour obtenir la coloration syntaxique.

Utiliser la Composition API sans outil de build #

De nombreux exemples pour l'API de composition utiliseront la syntaxe <script setup>. Si vous avez l'intention d'utiliser la Composition API sans outil de build, consultez l'utilisation de l'option setup().

Étapes suivantes #

Si vous avez raté l'Introduction, nous vous recommandons fortement d'en prendre connaissance avant de continuer sur la documentation.