/apprendre-vuejs

✨ Apprendre Vuejs en pratique depuis le HTML/CSS à du SSR avec Nuxtjs

Primary LanguageJavaScriptMIT LicenseMIT

✨ Apprendre Vuejs en pratique depuis le HTML/CSS à du SSR avec Nuxtjs

Ce repository est un tutoriel pratique pour apprendre le vuejs et les framework frontend moderne.

Ce tutoriel peut être suivi hors ligne à condition de remplir les prérequis et d'avoir télécharger ce repository git clone git@github.com:Jeremie-Chauvel/apprendre-vuejs.git.

Prérequis

Pour suivre ce tutoriel il est nécessaire d'avoir des connaissance basique en HTML, CSS et Javascript, j'expliquerais les notions avancées.

Si hors ligne:

  • Il est nécessaire d'avoir une version récente de nodejs:
node --version
# v10+ recommandé
  • il est nécessaire d'avoir une version récente de npm:
npm --version
# 6+

Si tu ne connais pas ces outils, j'explique l'installation ici

Sujet

Cette formation ce veux pratique, pour ce faire on va construire, exercice par exercice, une application de e-commerce basique.

Débuter

Pour débuter, commence par la première section: Pourquoi utiliser un framework frontend ?

Table des matières

Introduction

  1. Pourquoi utiliser un framework frontend ?
  2. Pourquoi utiliser le framework Vuejs ?
  3. Débuter le projet de site e-commerce

Basique

  1. Débuter avec Vue.js
  2. Rendu déclaratif
  3. Conditions et boucles
  4. Gestion des entrées utilisateur
  5. Découper en composants réutilisable
  6. Point sur les concepts de base Vuejs

Développer une application javascript vuejs moderne

  1. Pourquoi les balises script ne suffisent plus
  2. Qu'est qu'un bundler ?
  3. J'utilise directement vue-cli pour générer mon projet
  4. Avantage des composants monofichiers (single file component) pour vuejs

Le monde des applications web: Single Page App

  1. Qu'est ce qu'une Single Page App (SPA) et quelle est ses avantages ?
  2. Réécrire notre page web en tant qu'application web

Style et class

  1. Liaison de Classes HTML
  2. Liaison de Styles HTML

Base de l'instance Vuejs

  1. Données et méthodes
  2. Cycle de vie d'un composant

Syntaxe de template

  1. Interpolations (Filtres)
  2. Directives
  3. Rendu conditionnel v-if/v-show
  4. Rendu de liste v-for
  5. Gestion des évènements v-on
  6. Liaisons sur les champs de formulaire v-model

Propriétés calculées et observateurs

  1. Propriétés calculées
  2. Observateurs

Composant en detail

  1. Props
  2. Slots
  3. Evenements
  4. Composant dynamique

Routage Vue-router

Store Vuex

  1. Qu'est qu'un store

SSR: Nuxtjs

? Traduction

Annexes

  1. Installer Node.js et NPM

Disclaimer: ce cours est inspiré de l'excellente documentation officielle pour commencer Vuejs