Vue.js Bootcamp

# Basics

# Relevant terms

In this topic we will cover

  1. Data Models
  2. Virtual DOM
  3. Flux Design Pattern
  4. Installation
  5. vue-cli

# Data Models

Data modeling is the process of creating a data model

A data model is the process of design a data base structure that organizes elements of data.

# Virtual DOM

Vue.js accomplishes this by building a virtual DOM to keep track of the changes it needs to make to the real DOM

# Flux Design Pattern

The components in Flux's architecture interact more like an EventBus and less like an MVC. Flux is not actually a library or a framework, it's a pattern created by Facebook and implemented in React.

Structure:

  • Actions: Helpers that pass data to the Dispatcher
  • Dispatcher: Receives these Actions and broadcast paylodas to registered callbacks
  • Stores: Act as a container for application state and logic
  • Controller Views: React Components that grab the state from Stores and pass it down via props to child components

# Transpilers

Are tools that read source code written in one programming language, and produce the equivalent code in another language. Languages you write that transpile to JavaScript are often called compile-to-JS languages, and are said to target JavaScript

# Getting Started

# Prerequisites

# Installation

# CDN

In the index.html you should add this:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

# Vue-CLI

In your terminal, run this commands:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

For more details about the vue-cli here's the official docs.

# Creating a Project

vue create hello-world
cd hello-world
npm install
npm run serve

TIP

You should now be able to visit http://localhost:8080 to see your local server running!

# Debugging your Vue.js Application

When developers creates Modern Web Applications (SPA), they use several different libraries, because of this is needed to debbug the Web App

Vue.js Debbug Process

← Introduction →