Architecture de base pour un site statique réactif et internationalisé à l’aide de :
- Vuejs 2
- Vue-i18n + Vue-router pour l’internationnalisation des pages
- Import de jQuery, Bootstrap et ForkAwesome
- YAML pour les fichiers de langue (plus lisible qu’un JSON mais automatiquement converti)
- SASS pour l’habillage
- Webpack 4 pour automatiser la construction de l’ensemble

## En prod
Pour construire le site :

```
npm install
npm run prod
```

Les fichiers sont placés dans le dossier public.
Le site fonctionne uniquement à la racine du domaine.
Les pages sont prérendues **avec les traductions dans le code html**

## En développement
Pour voir le site en local

```
npm run dev
```

Les changements s’appliquent en temps réel et se voient sur http://localhost:8080/.

## En preview
On peut forcer la construction du site en local avec la commande :

```
npm run preview
```

Mais l’intérêt consiste surtout à voir le rendu sur les Gitlab Pages.
Les fichiers sont placés dans un sous-dossier du dossier public
correspondant au nom du dépôt.
Les pages sont prérendues **sans les traductions dans le code html** (la `fallbackLocale` est utilisée).
Celles-ci sont chargées dynamiquement (important à savoir lorsqu’il faut débugger un script).

```
├── app
│   ├── App.vue
│   ├── assets
│   │   ├── fonts
│   │   ├── icons
│   │   ├── img
│   │   └── scss
│   │       └── main.scss           # le fichier compilé est minifié dans /public/style.css
│   ├── components
│   │   ├── pages                   # exemple de pages (juste le titre change)
│   │   │   ├── About.vue
│   │   │   ├── Home.vue
│   │   │   └── HowItWorks.vue
│   │   └── partials
│   │       ├── Header.vue          # en-tête et menu de navigation
│   │       ├── I18n.vue            # switch en/fr
│   │       └── i18n.js             # script de changement de langue
│   ├── index.js                    # gestion de l’i18n + routage des pages + import des assets
│   └── locales                     # traductions
│       ├── en.yml
│       └── fr.yml
├── index.html                      # le fichier est simplement copié dans /public
├── package.json                    # liste des dépendances + définition de commandes npm run dev|prod
├── package-lock.json
├── postcss.config.js               # juste pour préfixer les css avec -webkit, -moz, -ms
├── README.md
└── webpack.config.js               # config webpack pour la construction du site
```