Fichiers de base d'un projet Vue.js

Vue d'ensemble

Lorsqu'on crée un projet avec npm create vue@latest, on obtient quelques fichiers qui forment la structure minimale pour exécuter l'application :

index.html
src/main.js
src/App.vue

index.html

Ce fichier est la page HTML principale. C'est elle qui sera chargée par le navigateur et dans laquelle Vue viendra injecter l'application. Voici les deux lignes clés à connaître :


                <div id="app"></div>
                <script type="module" src="/src/main.js"></script>

<div id="app"></div> Élément HTML vide servant de point d'ancrage (ou "montage") pour l'application Vue. Lors de l'exécution, Vue remplacera le contenu de cette balise par l'interface définie dans le composant racine App.vue.
<script type="module" src="/src/main.js"></script> Indique au navigateur de charger le fichier "main.js" en tant que module JavaScript. Ce fichier initialise Vue et monte l'application dans la balise ayant l'id="app".

main.js

Ce fichier est le point d'entrée de l'application Vue. Il importe les dépendances nécessaires et démarre l'application.


                import { createApp } from 'vue'
                import App from './App.vue'

                createApp(App).mount('#app')

import { createApp } from 'vue' Importe depuis la bibliothèque Vue la fonction createApp, qui sert à créer une nouvelle instance d'application.
import App from './App.vue' Importe le composant racine "App.vue". Ce composant contient la structure HTML, le style et éventuellement la logique de l'application.
createApp(App).mount('#app') Crée l'application à partir du composant App, puis la "monte" dans l'élément HTML dont l'ID est app dans "index.html".

Importer des CSS globaux accessibles à tous les composants

C'est aussi dans main.js que l'on importe les fichiers CSS partagés par toute l'application (ex. reset, variables, transitions, utilitaires).

Pour centraliser ces styles, il faut créer un fichier global dans le dossier src/assets/ (ex.: style.css) et ensuite l'importer dans le fichier main.js, juste après les dépendances JavaScript :


                import { createApp } from 'vue'
                import App from './App.vue'

                // Le contenu du fichier CSS sera accessible dans tous les composants de l'application.
                import './assets/style.css'

                createApp(App).mount('#app')

App.vue

Ce fichier est un composant Vue monofichier (SFC : Single File Component). Il regroupe dans un seul fichier la logique JavaScript, le modèle HTML et le style CSS d'un composant.


                <script setup>
                </script>

                <template>
                    <h1>You did it!</h1>
                    <p>
                        Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
                        documentation
                    </p>
                </template>

                <style scoped>
                </style>

Sans <script setup> :


                                <script>
                                import { ref } from 'vue'
                                export default 
                                {
                                    setup() 
                                    {
                                        const message = ref('Hello')
                                        return { message }
                                    }
                                }
                                </script>

Avec <script setup> :


                                <script setup>
                                import { ref } from 'vue'
                                const message = ref('Hello')
                                </script>

<template>...</template> Contient le code HTML qui définit l'interface visible du composant.
<style scoped>...</style> Zone où l'on écrit le CSS spécifique au composant. L'attribut scoped garantit que ces styles ne s'appliquent qu'aux éléments de ce composant, évitant ainsi les conflits avec d'autres composants.