Morioh
Login
Rodney Vg

Rodney Vg

3 years ago

Learn Vuejs in Practice from HTML / CSS to SSR with Nuxtjs

This repository is a practical tutorial to learn Vuejs and modern frontend frameworks.

This tutorial can be followed offline provided you meet the prerequisites and have downloaded this repository git clone git@github.com:Jeremie-Chauvel/apprendre-vuejs.git.

Prerequisite

To follow this tutorial it is necessary to have basic knowledge of HTML, CSS and Javascript, I will explain the advanced concepts.

If offline :

  • It is necessary to have a recent version of nodejs:
node --version
 ## v10 + recommended
  • it is necessary to have a recent version of npm:
npm --version
 ## 6+

If you do not know these tools, I explain the installation here

Topic

This training is practical, to do this we will build, exercise by exercise, a basic e-commerce application.

Start

To get started, start with the first section: Why use a frontend framework?

Contents

Introduction

  1. Why use a frontend framework?
  2. Why use the Vuejs framework?
  3. Start the e-commerce site project

Basic

  1. Getting started with Vue.js
  2. Declarative rendering
  3. Conditions and loops
  4. User input management
  5. Cut into reusable components
  6. Viewjs Basic Concepts Update

Develop a modern vuejs javascript application

  1. Why script tags are no longer enough
  2. What is a bundler?
  3. I use vue-cli directly to generate my project
  4. Single file component advantage for vuejs

The world of web applications: Single Page App

  1. What is a Single Page App (SPA) and what are its advantages?
  2. Rewrite our web page as a web application

Style and class

  1. Linking HTML Classes
  2. Linking HTML Styles

Vuejs instance base

  1. Data and methods
  2. Component lifecycle

Template syntax

  1. Interpolations (Filters)
  2. Guidelines
  3. V-if / v-show conditional rendering
  4. V-for list rendering
  5. Management of v-on events
  6. Bindings on v-model form fields

Calculated properties and observers

  1. Calculated properties
  2. Observers

Component in detail

  1. Props
  2. Slots
  3. Events
  4. Dynamic component

Vue-router routing

Vuex blind

  1. What is a store

SSR: Nuxtjs

? Translation

Appendices

  1. Install Node.js and NPM

Download Details:

Author: Jeremie-Chauvel

Source Code: https://github.com/Jeremie-Chauvel/apprendre-vuejs

#vue #vuejs #nuxtjs #html #css

Learn Vuejs in Practice from HTML / CSS to SSR with Nuxtjs
3.65 GEEK