# 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: 

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

{% hint style="info" %}
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:

```javascript
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.
{% endhint %}

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

```javascript
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.

  ```javascript
  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

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