Felices los cuatro 😄
Introducción
Bienvenidos al Curso Profesional de VueJS
Introducción a VueJS
CLI y Dev Tools
Herramientas y Experiencia de Desarrollo + Archivos .vue
CLI - Hello World
Webpack
Babel
Eslint
SASS y BULMA
PUG
Ejercicio de SASS y PUG
Ejercicio Avanzado de Pug y SASS
Manipulación del DOM
Expresiones
Directivas
Data Binding
Computed properties
Watchers
Eventos
Integración a Platzi Music
Ejercicio de Manipulación del DOM
REST y HTTP
Servicios
Consumir API's REST
Fetch API & Trae
Sistema de Componentes
Component
Creación de componentes
Reactividad
Ciclo de vida
Comunicación entre componentes padres e hijos
Comunicación de hijos hacia padres
Utilización de Slots
Comunicacion entre Componentes Genericos - Event Bus y Plugins
Vue Router
Introducción a Vue Router
Instalar vue-router y configurar router view
Crear y Navegar Rutas con router-link
Extendiendo VueJS
Modifiers
Filtros
Directivas Personalizadas
Mixins
Clases, Animaciones y Transiciones36
Vue Transitions y Animaciones de CSS
Vuex
Estado Centralizado, Flux y Vuex
State
Mutations
Getters
Actions
Integración a Platzi Music
Nuxt.js
Server Side Rendering
Nuxt.js
Conceptos Básicos de Nuxt
Deploy a Producción con Now
Qué es now
Configuración de now y deploy
Conclusiones
Cierre del curso
Bonus
Internacionalización con vue-i18n
Unit Test Karma - Mocha & Webpack
Implementación de Autenticación de Usuarios en Vue usando JWT
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 13
Preguntas 1
Felices los cuatro 😄
Si estan usando vue3 el comando para instalar vue-router es
npm install vue-[email protected]4
y quedaria configurado de esta manera
router.js
import { createRouter, createWebHistory } from "vue-router"
import Search from "../views/Search.vue"
const routes = [
{
path: "/",
name: "Search",
component: Search,
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
})
export default router
en el main.js quedaria asi
import { createApp } from "vue"
import App from "./App.vue"
import router from '@/router'
const app = createApp(App)
app.mount("#app")
app.use(router)
o tambien podria quedar asi
import { createApp } from "vue"
import App from "./App.vue"
import router from "@/router"
createApp(App)
.mount("#app")
.use(router)
Una forma más simple de hacer esto es ejecutar el comando:
vue add router
Solito hace las configuraciones, al ejecutarlo recomiendo tener el archivo App.vue abierto ya que este comando sobreescribirá el archivo, asi cuando lo sobreescriba simplemente hacen ctrl + z
Aunque Vue no correra el comando hasta que hagan commit de sus cambios
Funciona tanto para Vue 2 como para Vue 3
Yo cambie de:
.content(v-if="track && track.album")
a solo:
.content(v-if="track.album")
Debido a que ya hemos registrado el track objecto.
Saludos
yo empezé el curso usando el CLI de VUE, y agregue Router a mi proyecto desde un principio, lo que empecé a usar las vistas y componentes
No es mejor el
img(v-if="track && track.album")
Poner esa condicional en el content? ya que en “teoria” no existe aun tampoco el track como para cargar un source
Yo agregue una notificación de que si la canción no tiene un previw me mande una notificación de que la canción no lo tiene disponible
Comparto mi codigo
<template lang="pug">
.content(v-if="showNotification")
.notification.is-danger
p Lo siento la cancion no tiene un previw disponible!
.content(v-else-if="track.album && track.preview_url")
p
img(:src="track.album.images[0].url")
p
strong {{ track.name }}
small [{{ track.duration_ms }}]
p
audio(controls, v-bind:src="track.preview_url" )
</template>
<script>
export default {
data () {
return {
track: {},
showNotification: false
}
},
created () {
this.$bus.$on('set-track', (track)=> {
this.track = track
if (!this.track.preview_url) {
this.showNotification=true
}
})
},
watch: {
showNotification () {
if (this.showNotification) {
setTimeout( () => {
this.showNotification = false
}, 3000 )
}
}
},
}
</script>
Para el Player.vue:
<template lang="pug">
.content(v-if="track.name")
p.is-128x128
img(:src="track.album.images[0].url")
p
strong {{ track.name }}
span - {{ track.artists[0].name }}
audio(v-show="track.preview_url", controls, :src="track.preview_url", style="height: 60px;")
</template>
7:16 cuando quita la importación de footer y header, atom marca un error en la linea 43 'PmFooter' is not defined
, alguien sabe como se llama ese plugin?
Ya busqué en los plugins un monton de linterns pero ninguno parece funcionar correctamente
Todo va cobrando sentido ahora.
Las rutas hacen referencia a componentes de Vue para renderizarlos dentro del tag <vue-router>
Dichos componentes pueden tener dentro referencias a otros componentes. VAYA ahora si entiendo por que lo asocian con los cuadritos de LEGGO.
Changos, al inicio debí hacer un git init de mi proyecto, ahora tengo que estar comentando muchas partes del mismo para no perder la secuencia del curso.
Hemos visto lo basi con VUE ROUTER, como instalarlo, crear rutas, asociar rutas a componenetes.
ME ENCANTAAaaaaaAAaaaaAAaaaaAAAaaaAAaaaaAAaaaaAAA JAJAJAJAJAJAJAJAJAJ “vamo’a se’feli” “vamo’a se’feli” feliiices los cuaAatroOOoo XDXDXDXDD que chimbo que la api no este funcionando :’/, ¿Como prodria yo replicar esa api?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.