Structure d'une application

Fichiers statiques

Tous les documents statiques (favicon, robot.txt ) sont placé dans le dossier public/.

On appelle document statique les fichiers que ne seront pas analysés et retravailler par Quasar ou Vite. On y trouve les fichiers qui sont accédés directement par leur noms, tels que robots.txt ou favicon.ico

Fichiers de ressources

Les fichiers de ressources, tels que les images, les polices et les médias, sont placés dans src/assets , puis peuvent être intégrés en les important comme un fichier javascript:

import QuasarVertical from '../assets/quasar-logo-vertical.svg'

Pour faciliter l'import des fichiers de différents fichiers, quasar offre des alias vers certains dossiers de l'application. Par exemple, assets est mappé à /src/assets.

Ainsi, on peut importer le même fichier avec la ligne suivante, et ce depuis n'importe ou dans le projet:

import QuasarVertical from 'assets/quasar-logo-vertical.svg'

Cela nous évite, si on a des composants localisés profondément dans une hiérarchie de dossiers, d'avoir le préfixe ../ répété plusieurs fois.

Fichiers dynamiques

Tous les documents contenant du code (HTML/CSS/JS), se trouvent dans le dossier src/ de l'application.

• App.vue : Composant Vue principal de l'application

  • <router-view /> : élément ou seront chargé les layouts de l'application

• layouts/ : mise en page de l'application (plein écran, avec sidebar à gauche, ... )

  • MainLayout.vue : une mise en page avec

    • un entête <q-header>

    • un menu latéral à gauche <q-drawer>

    • un zone de page <q-page-container>

      • <router-view /> : élément ou seront chargées les différentes pages de l'application

• pages/ : les pages de l'application

  • IndexPage.vue : page de démarrage (affiche une liste dynamique)

  • ErrorNotFound.vue : s'affiche lorsqu'une page demandée est introuvable.

• assets/ : éléments de ressource : voir plus haut

• stores/ : Gestionnaire d'état Pinia

  • Zone de stockage pour centralisation des données. https://pinia.vuejs.org/

• components/ : contiendra tous nos composants Vue

• css/ : styles de l’application

  • app.scss : Styles au format Sass : https://sass-lang.com/guide

    • Si vous ne connaissez pas c'est le moment d'apprendre !!! Très utile.

  • quasar.variables.scss : Configurer les couleurs principales de l'application

• router/ : routes, URL's, de l'application

  • routes.js : fichier ou sont définies les routes

import MainLayout from 'layouts/MainLayout.vue'
import IndexPage from 'pages/IndexPage.vue'
import ErrorNotFound from 'pages/ErrorNotFound.vue'

const routes = [
  // Notre Layout principal
  {
    path: '/',
    component: MainLayout,
    children: [
      // Notre page d'index
      { path: '', component: IndexPage }
    ]
  },

  // Notre page 404, il faut toujours la laisser en dernier,
  // afin qu'elle aie la priorité la plus basse.
  {
    path: '/:catchAll(.*)*',
    component: ErrorNotFound
  }
]

export default routes

Créer une nouvelle route

• Créer une nouvelle page

  • copier la page pages/IndexPage.vue et la renommer pages/HelloPage.vue

• Modifier pages/HelloPage.vue

  • remplacer l'<example-component>...</example-component> par <h1>Hello World !</h1>

• Déclarer la nouvelle route hello dans routes/routes.js en l'ajoutant au tableau children. Ne pas oublier d'ajouter une virgule après la route existante.

  import MainLayout from 'layouts/MainLayout.vue'
  import IndexPage from 'pages/IndexPage.vue'
  import HelloPage from 'pages/HelloPage.vue'
  
  const routes = [
      {
          path: '/',
          component: MainLayout,
          children: [
            { path: '', IndexPage },
            { path: 'hello', component: HelloPage }
          ]
      },

• Tester la nouvelle route : http://localhost:8081/#/hello

• Ajouter des liens dans IndexPage et dans HelloPage afin de tester la navigation

  <router-link :to="{ path: 'hello' }">Hello page</router-link>
  <router-link :to="{ path: '/' }">Home page</router-link>