Comment créez-vous une page sur Vue?

Une page Vue est généralement créée en tant que composant séparé (.vue), qui se compose de trois sections : <template>, <script> et <style>.

1. <template> : Définit la structure HTML de la page, en utilisant la syntaxe de template Vue pour lier les données et la logique.

   <template>
     <div>
       <h1>{{ pageTitle }}</h1>
       <p>{{ pageContent }}</p>
     </div>
   </template>
   

2. <script> : Contient la logique JavaScript de la page, y compris la définition des données (data), des propriétés calculées (computed), des méthodes (methods), des hooks du cycle de vie et d'autres options du composant.

   <script>
   export default {
     data() {
       return {
         pageTitle: 'Ma page Vue',
         pageContent: 'Ceci est le contenu de ma première page Vue.'
       };
     },
     mounted() {
       // Logique exécutée après le montage du composant
       console.log('Page montée !');
     }
   }
   </script>
   

3. <style> : Contient les styles CSS appliqués au composant. Le modificateur scoped peut être utilisé pour limiter la portée des styles à ce composant.

   <style scoped>
   h1 {
     color: blue;
   }
   
   p {
     font-size: 16px;
   }
   </style>
   

Le composant créé est ensuite importé dans le fichier de routage (par exemple, en utilisant vue-router) et lié à une URL spécifique, permettant d'afficher cette page lors de la navigation vers cette adresse.

// router/index.js (exemple avec vue-router)
import { createRouter, createWebHistory } from 'vue-router';
import MyPage from '@/views/MyPage.vue'; // Import du composant de la page

const routes = [
  {
    path: '/my-page', // URL de la page
    name: 'MyPage',
    component: MyPage // Composant à afficher
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

Dans le fichier principal de l'application (main.js), le routeur est connecté à l'instance Vue.

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Ainsi, créer une page Vue revient à créer un composant décrivant sa structure, sa logique et ses styles, puis à configurer le routeur pour afficher ce composant à une URL spécifique.