Curso Vue.js

# Comenzando

# Instalación CLI de Vue.js

# Prerequisitos Node.js

Descarga e instala Node.js (opens new window)

Descarga e instala Visual Studio Code (opens new window)

# Instalación CLI Vue.js

  1. Instalar

Descarga e instala Vue.js CLI (opens new window)

npm install -g @vue/cli
  1. Ver la versión
vue --version
  1. Actualizar
npm update -g @vue/cli

# Creando un proyecto

  • Usando una interfaz gráfica
vue ui
  • Crear proyecto
  • Introducir un nombre
  • Manual
  • Seleccionar Vue.js 3
  • Añadir Router y Vuex

# Instalando módulos Boostrap y Popper

  1. Instala bootstrap

Instala Bootstrap (opens new window)

npm i --save bootstrap
  1. Instala también Popper en algunos componentes de Bootstrap es necesario

Necesita Popper (opens new window)

Instala Popper (opens new window)

npm i @popperjs/core
  1. Copia en main.js
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

# Componentes > TarjetaProducto

Comencemos modificando el componente "HelloWorld" por un Componente "TarjetaProducto" en el que mostrar los productos.

Nota: He includo en la carpeta public del proyecto estas imágenes:

Solo la carpeta imagenes (opens new window)

Renombremos el archivo

# Template

<template>
  <div class="card" style="width: 18rem">
    <img :src="producto.imagen" class="card-img-top" alt="" />
    <div class="card-body">
      <h5 class="card-title">{{ producto.nombre }}</h5>
      <p class="card-text">
        {{ producto.descripcion }}
      </p>
      <a href="#" class="btn btn-primary">Leer más</a>
    </div>
  </div>
</template>

# Script

<script>
export default {
  data () {
    return {
       producto: {
         id: "01", 
         nombre: "Gamora", 
         imagen: "./imagenes/Gamora.jpeg",
         descripcion: "Gamora es la hija adoptiva de Thanos, y la última de su especie. Sus poderes incluyen fuerza y agilidad sobrehumanas y un factor de curación acelerada"
      }
    }
  }
}
</script>

# Views > Home

# Template

<template>
  <div class="row justify-content-center">
   <TarjetaProducto />
  </div>
</template>

# Script

<script>
import TarjetaProducto from '@/components/TarjetaProducto.vue'

export default {
  name: 'Home',
  components: {
    TarjetaProducto
  }
}
</script>

# Props Componente TarjetaProducto

Si deseamos reutilizar este componente sin tener que duplicarlo, podemos usar las propiedades llamadas props

# Script

<script>
export default {
    props: {
    producto: Object
  }
}
</script>

# Props Views Home

# Template

<template>
  <div class="row justify-content-center">
    <TarjetaProducto
      class="col-4 m-2"
      v-for="producto in productos"
      :key="producto.id"
      :producto="producto"
    />
  </div>
</template>

# Script

<script>
import TarjetaProducto from '@/components/TarjetaProducto.vue'

export default {
  name: 'Home',
  components: {
    TarjetaProducto
  },
    data() {
          return {
            productos: [
              { id: "01", nombre: "Gamora", imagen: "./imagenes/Gamora.jpeg", descripcion: "Gamora es la hija adoptiva de Thanos, y la última de su especie. Sus poderes incluyen fuerza y agilidad sobrehumanas y un factor de curación acelerada"},
              { id: "02", nombre: "Groot", imagen: "./imagenes/Groot.jpeg", descripcion: "Groot es un coloso Flora del Planeta X, la capital de los mundos secundarios"},
              { id: "03", nombre: "Rocket", imagen: "./imagenes/Rocket.jpeg", descripcion: "Rocket, es un individuo genéticamente modificado parecido a un mapache que se convirtió en un criminal al igual que su amigo Groot"},
              { id: "04", nombre: "StarLord", imagen: "./imagenes/StarLord.jpeg", descripcion: "Es el hijo mestizo del emperador J'Son del planeta Spartax y la humana Meredith Quill"},
            ],
          };
        },
}
</script>

# Router

# Views Home => ListaProductos

Cambio el nombre del archivo Home.vue por ListaProductos.vue

# Script

 name: "ListaProductos",

# Router > index.js => ListaProductos

import ListaProductos from "../views/ListaProductos.vue";

  {
    path: "/",
    name: "ListaProductos",
    component: ListaProductos
  },

# Router > index.js => SobreNosotros

Cambio el nombre del archivo About.vue por SobreNosotros.vue

  {
    path: "/sobre-nosotros",
    name: "SobreNosotros",
    component: () =>
      import("../views/SobreNosotros.vue")
  }

# src > App.vue

 <router-link to="/sobre-nosotros">Sobre nosotros</router-link>

# Axios

# Creando un servidor de json

my-json (opens new window)

productos (opens new window)

my-json + github (opens new window)

{
  "productos": [
    {
      "id": "01",
      "nombre": "Gamora",
      "imagen": "./imagenes/Gamora.jpeg",
      "descripcion": "Gamora es la hija adoptiva de Thanos, y la última de su especie. Sus poderes incluyen fuerza y agilidad sobrehumanas y un factor de curación acelerada"
    },
    {
      "id": "02",
      "nombre": "Groot",
      "imagen": "./imagenes/Groot.jpeg",
      "descripcion": "Groot es un coloso Flora del Planeta X, la capital de los mundos secundarios"
    },
    {
      "id": "03",
      "nombre": "Rocket",
      "imagen": "./imagenes/Rocket.jpeg",
      "descripcion": "Rocket, es un individuo genéticamente modificado parecido a un mapache que se convirtió en un criminal al igual que su amigo Groot"
    },
    {
      "id": "04",
      "nombre": "StarLord",
      "imagen": "./imagenes/StarLord.jpeg",
      "descripcion": "Es el hijo mestizo del emperador J'Son del planeta Spartax y la humana Meredith Quill"
    }
  ]
}

Instalar axios

npm install axios

import axios from "axios";

productos: null

created () {
  axios
    .get('https://my-json-server.typicode.com/arduinoes/datos/productos')
    .then(response => {
      this.productos = response.data;
      console.log('productos:', response.data)
    })
    .catch(error =>{
      console.log(error)
    })
  }

# Carpeta Servicios (modulando)

Crea en src una carpeta servicios con un archivo ServiciosProductos.js

import axios from "axios";

const apiClient = axios.create({
    baseURL:'https://my-json-server.typicode.com/arduinoes/datos',
    withCredentials: false,
    headers: {
        Aceppt: 'application/json',
        'Content-Type':'application/json'
    }
})

export default {
    obtenerProductos(){
       return apiClient.get('/productos')
    }
}

# Views > ListaProductos

# Script

import ServiciosProductos from "@/servicios/ServiciosProductos.js"

created () {
   ServiciosProductos.obtenerProductos()
      .then(response => {
        this.productos = response.data;
        console.log('productos:', response.data)
      })
      .catch(error =>{
        console.log(error)
      })
    }

# Views > DetalleProducto

# Servicio > ServiciosProducto

Añadir

obtenerProducto(id){
      return apiClient.get('/productos/' + id )
    }

# Componente TarjetaDetalle.vue

# Template

<template>
  <div v-if="producto" class="card" style="width: 50%">
    <img :src="producto.imagen" class="card-img-top" alt="" />
    <div class="card-body">
      <h5 class="card-title">{{ producto.nombre }}</h5>
      <p class="card-text">
        {{ producto.descripcion }}
      </p>
       <router-link to="/">
      <button class="btn btn-primary">Volver</button> 
      </router-link>
    </div>
  </div>
</template>

# Script

<script>
export default {
  props: {
    producto: Object,
  },
};
</script>

# View DetalleProducto

# Template

<template>
  <div v-if="producto" class="row justify-content-center" >
    <TarjetaDetalle
      :producto="producto"
     />
  </div>
</template>

# Script

<script>
import ServiciosProductos from "../servicios/ServiciosProductos.js";
import TarjetaDetalle from "../components/TarjetaDetalle.vue"

export default {
  name: "DetalleProducto",
  components: {
    TarjetaDetalle
  },
  props: ["id"],
  data() {
    return {
      producto: null,
    };
  },
  created() {
    ServiciosProductos.obtenerProducto(this.id)
      .then((response) => {
        this.producto = response.data;
        console.log("producto:", response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

# Rutas dinámicas

# Router > index.js

{
  path: "/detalle-producto/:id",
  name: "DetalleProducto",
  props: true,
  component: () =>
    import("../views/DetalleProducto.vue")
}

# Componente TarjetaProducto

Añade la etiqueta router-link al enlace Leer mas

<router-link :to="{ name: 'DetalleProducto', params: { id: producto.id }}">
<a href="#" class="btn btn-primary">Leer mas</a> 
</router-link>