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.0 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 / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … 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 :
- L'environnement de développement recommandé est Visual Studio Code + Volar extension. Si vous utilisez d'autres éditeurs, lisez la section sur le support des environnements de développement.
- Guide - Outils fournit plus de détails sur les utilitaires, 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 choisi 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
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.
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, ref } = Vue
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>
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, 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, ref } from 'vue'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>
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
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
},
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é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 VSCode, 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.