Passer au contenu

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

Pré-requis

  • Être familier avec l'invite de commandes
  • Avoir installé Node.js version 18.3 ou plus

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 et que votre répertoire de travail courant est bien celui où vous souhaitez créer un projet. Exécutez la commande suivante dans votre invite de commandes (sans le symbole $) :

npm
pnpm
yarn
bun
sh
$ npm create 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: <votre-nouveau-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-nouveau-projet>...
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 :

npm
pnpm
yarn
bun
sh
$ 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 :

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

npm
pnpm
yarn
bun
sh
$ 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.

Étapes suivantes >

Utiliser Vue depuis un CDN

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

html
<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 évidemment, 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ée pour enrichir du HTML statique ou 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 ci-dessus charge le build global de Vue, où toutes les API haut-niveau sont exposées comme des propriétés sur l'objet global Vue. Ci-dessous, un exemple utilisant le build global :

html
<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>

CodePen Demo >

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

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

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

CodePen Demo >

TIP

De nombreux exemples de la Composition API tout au long du guide utiliseront la syntaxe <script setup>, qui nécessite des outils de génération. Si vous avez l'intention d'utiliser la Composition API sans outil de build, consultez l'utilisation de l'option setup().

Utiliser le build des modules ES

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 :

html
<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>
html
<div id="app">{{ message }}</div>

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

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

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

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 :

js
const { createApp, ref } = Vue

Nous pouvons dire au navigateur où trouver l'import vue par l'usage de l'Import Maps :

html
<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>

CodePen Demo >

html
<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('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

CodePen 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.

Support navigateur de l'Import Maps

Pour le moment, les Import Maps ne sont disponibles que dans les navigateurs basés sur Chromium, nous vous recommandons donc d'utiliser Chrome ou Edge pendant le processus d'apprentissage.

Si vous utilisez Firefox, c'est supporté par défaut à partir de la version 108+ sinon vous devez l'activer via la config dom.importMaps.enabled dans about:config pour les versions 102 et supérieures.

Si votre navigateur préféré ne prend pas encore en charge les Import Maps, vous pouvez ajouter le support (polyfill) avec es-module-shims.

À éviter en production

L'usage des Import Maps est destiné à l'apprentissage uniquement. Si vous avez l'intention d'utiliser Vue sans outils de compilation en production, consultez le Guide de déploiement en production.

Bien qu'il soit possible d'utiliser Vue sans outil de build, une alternative à considérer consiste à utiliser vuejs/petite-vue qui pourrait mieux convenir au contexte dans lequel jquery/jquery (dans le passé) ou alpinejs/alpine (actuellement) pourrait plutôt être utilisée.

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 :

html
<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>
js
// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Count est égal à {{ count }}</div>`
}
js
// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Count est égal à {{ count }}</div>`
}

Si vous tentez d'ouvrir le fichier index.html ci-dessus dans votre navigateur, vous trouverez des erreurs relevées parce que les modules ES ne peuvent fonctionner via le protocol file://, qui est 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://, qui est celui que les navigateurs utilisent lors de l'ouverture de pages sur le Web. Pour que les modules ES fonctionnent sur notre machine locale, nous devons servir le 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 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.

Étapes suivantes

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

Démarrage rapidea chargé