2018-03-01 11:31:23 +00:00
|
|
|
|
|
2018-09-21 21:00:42 +00:00
|
|
|
|
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
|
2018-03-01 11:31:23 +00:00
|
|
|
|
|
2018-09-21 21:00:42 +00:00
|
|
|
|
## En prod
|
|
|
|
|
|
Pour construire le site :
|
2018-03-01 11:31:23 +00:00
|
|
|
|
|
2018-09-21 21:00:42 +00:00
|
|
|
|
```
|
|
|
|
|
|
npm install
|
|
|
|
|
|
npm run prod
|
|
|
|
|
|
```
|
2018-03-01 11:31:23 +00:00
|
|
|
|
|
2018-09-21 21:00:42 +00:00
|
|
|
|
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**
|
2018-04-04 09:27:24 +00:00
|
|
|
|
|
2018-09-21 21:00:42 +00:00
|
|
|
|
## En développement
|
|
|
|
|
|
Pour voir le site en local
|
2018-04-04 09:27:24 +00:00
|
|
|
|
|
2018-09-21 21:00:42 +00:00
|
|
|
|
```
|
|
|
|
|
|
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
|
|
|
|
|
|
```
|
