Une base de travail pour lancer son prochain projet front. Réalisé pour les cours de WEB3.
Ce projet propose une implémentation des librairies vues en cours magistral. Il utilise les packages suivantes:
- ViteJS
- SASS
- Stylelint
- EsLint
- Installer nodeJS sur sa machine
- Avoir vscode
- Ajouter le plugin EditorConfig à vscode
- Ajouter le plugin Prettier à vscode
- Ajouter le plugin Eslint à vscode
- Ajouter le plugin Stylelint à vscode
Ces éléments sont ensuite configurés par le fichier de config local .vscode/settings.json
- Dans le terminal lancer la commande
git clone https://github.com/notjb/mmi-starter.git NOM_DU_PROJET - Lancer la commande
npm install - Ouvrir le dossier dans VSCode
- Optionnel : Supprimer le dosier git:
rm -rf .git - Optionnel : Mettre à jour
namedans le fichierpackage.json - Optionnel : Initialiser git avec la commande
git init
- Dans vscode, ouvrir la fenêtre de terminal (Terminal > Nouveau terminal)
- Lancer la commande
npm run dev
Le scss est automatiquement corrigé suivant certaines règles. Cepdendant, il peut arriver qu'un fix automatique ne soit pas possbile. À ce moment, une erreur server affichera les erreurs en terminal et en front, il faudra les corriger.
Se référer à la documentation stylelint pour obtenir des exemples de résolution : https://stylelint.io/user-guide/rules/list/
Pour ajouter du css/scss :
- Ajouter les fichiers dans le dossier css
- Faire les imports nécessaires dans
src/app.scss
Pour ajouter des images :
- Utiliser les dossiers
public/imgetpublic/svg - Pour les appeler dans
index.html, procéder comme suit:<img src="/img/nom-du-fichier.jpg">.
- Dans vscode, si ce n'est pas déjà fait, ouvrir la fenêtre de terminal (Terminal > Nouveau terminal)
- Lancer la commande
npm run build - Lancer
npm run previewpour prévisualiser le site en local - Le dossier
/distcomporte le site prêt à être mis en ligne 🎉