Header y contenido
Contenido del curso
Setup inicial
Vista
Gráfico
Modelo
Cierre
Header y contenido
Contenido del curso
Header y contenido
Santiago Gonzalez
Estudiante
Alvaro Eduardo Armijos Sarango
Estudiante
Santiago Jimenez Moncada
Estudiante
Jesus Abel Jimenez Bracho
Estudiante
Sergio Fernandez
Estudiante
César Andrés Aguilar Párraga
Estudiante
Victor Roberto López Marroquín
Estudiante
Yormi Altamiranda
EstudianteSantiago Gonzalez
EstudianteSergio Fernandez
Estudiante
Josue Cerron Tuesta
Estudiante
Eduardo Razo Cobián
Estudiante
Juan Guillermo Perez Cardozo
Estudiante
Cesar González Caballero
Estudiante
Rene Linares
Estudiante
Diana Martinez
EstudianteRene Linares
EstudianteCesar González Caballero
Estudiante
fabio andres zamora osorio
EstudianteDiana Martinez
EstudianteDiana Martinez
Estudiante
josué valencia
Estudiante
Mario Alejandro Macias Ortiz
Estudiante
Jose Alejandro Pantoja Giraldo
EstudianteEstilos de Header.vue
<style scoped> .header { display: flex; justify-content: space-around; align-items: center; width: 100vw; } img, span { width: 48px; } h1 { font-size: 1.4rem; color: var(--brand-blue); } h1 span { color: var(--brand-green); } </style>
El header va sin el punto:
header { display: flex; justify-content: space-around; align-items: center; width: 100vw; }
va con punto por que tiene una clase
Estilos de layout
<<style scoped> .header, .resume, .movements { display: flex; justify-content: space-around; align-items: center; padding: 14px 0; box-sizing: border-box; } .header { position: fixed; width: 100vw; } .resume { min-height: 100vh; } .movements { z-index: 1; position: absolute; flex-direction: column; bottom: 0; width: 100vw; background-color: white; box-shadow: 0 -8px 16px #e5e5e5; border-radius: 24px; } .movements .head { display: flex; justify-content: center; align-items: center; padding: 24px; width: 100%; box-sizing: border-box; } .movements .body { height: 75vh; width: 100%; } .movements .head .grip { width: 120px; height: 8px; background-color: #e5e5e5; border-radius: 4px; } </style>>
El header va sin .
En el layout.vue si va con punto porque es una clase, ahi hay un div con una clase header
Por si tienen dudas o si como yo, ya pasaron los anteriores 2 cursos, pero nunca lograron determinar cuáles eran los plugins de VSCode les dejo un tutorial con plugins interesantes y posiblemente los mismos de la profe: https://flaviocopes.com/vue-vscode/
Dato de vital importancia
Estilos de Layout.vue
<style scoped> .header, .resume, .movements { display: flex; justify-content: space-around; align-items: center; padding: 14px 0; box-sizing: border-box; } .header { position: fixed; width: 100vw; } .resume { min-height: 100vh; } .movements { z-index: 1; position: absolute; flex-direction: column; bottom: 0; width: 100vw; background-color: white; box-shadow: 0 -8px 16px #e5e5e5; border-radius: 24px; } .movements .head { display: flex; justify-content: center; align-items: center; padding: 24px; width: 100%; box-sizing: border-box; } .movements .body { height: 75vh; width: 100%; } .movements .head .grip { width: 120px; height: 8px; background-color: #e5e5e5; border-radius: 4px; } </style>
El header va sin .
Gracias!
Para crear la estructura básica de un componente en visual studio code, teclea:
vue:template
y el editor de código te autocompletará el código básico.
no me funciona, que plugin tienes instalado ?
<style scoped>
.header,
.resume,
.movements {
display: flex;
justify-content: space-around;
align-items: center;
padding: 14px 0;
box-sizing: border-box;
}
.header {
position: fixed;
width: 100vw;
}
.resume {
min-height: 100vh;
}
.movements {
z-index: 1;
position: absolute;
flex-direction: column;
bottom: 0;
width: 100vw;
background-color: white;
box-shadow: 0 -8px 16px #e5e5e5;
border-radius: 24px;
}
.movements .head {
display: flex;
justify-content: center;
align-items: center;
padding: 24px;
width: 100%;
box-sizing: border-box;
}
.movements .body {
height: 75vh;
width: 100%;
}
.movements .head .grip {
width: 120px;
height: 8px;
background-color: #e5e5e5;
border-radius: 4px;
}
</style>
Hola! Tengo una pregunta. Al traerme al home el componente de layout y el header no los renderiza. Solo renderiza el home sin estos ultimos. Me sale ademas los siguientes warn en consola: [Vue warn]: Failed to resolve component: HeaderComp If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <HomeComp> at <AsyncComponentWrapper> at <App> . [Vue warn]: Failed to resolve component: LayoutComp If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <HomeComp> at <AsyncComponentWrapper> at <App> . . Aqui dejo mi codigo:
// Codigo de HomeComp <template> <LayoutComp> <template #header> <HeaderComp></HeaderComp> </template> </LayoutComp> </template> <script> import { LayoutComp } from "./LayoutComp.vue"; import { HeaderComp } from "./HeaderComp.vue"; export default { components: { LayoutComp, HeaderComp, }, }; </script> //Codigo de LayoutComp <template> <div class="header"> <slot name="header"></slot> </div> </template>
Es como si estuviera importando bien el componente HomeComp a App pero como si no estuviera importando bien HeaderComp y LayoutComp a HomeComp. Donde puede estar el problema? Ayuda, por favor
No estoy segura, pero muy probablemente sea que haces el import con llaves:
import { LayoutComp } from "./LayoutComp.vue"; import { HeaderComp } from "./HeaderComp.vue";
Y debería funcionar sin llaves:
import LayoutComp from "./LayoutComp.vue"; import HeaderComp from "./HeaderComp.vue";
Sí, efectivamente en eso estaba el error. Ahora todo funciona🥳 El problema es que Volar autocompleta el import con las llaves. Y al parecer las llaves solo funcionan para importar funciones no para los componentes Busque ayer todo el día en Internet y en la documentación como arreglar este error y no encontré nada útil. Temía atascarme mucho tiempo por culpa de este error y no poder seguir con el curso pero ya está todo en perfecto Estado. Muchas gracias, Diana 🙏🏻
<style scoped>
header {
display: flex;
justify-content: space-around;
align-items: center;
width: 100vw;
}
img,
span {
width: 48px;
}
h1 {
font-size: 1.4rem;
color: var(--brand-blue);
}
h1 span {
color: var(--brand-green);
}
</style>
¿Como dividir el diseño de figma para identificar la cantidad de componentes que se deben crear y cuales son los componentes padre e hijos?
Eso solo te lo va dando la experiencia, en mi experiencia y personalmente, he aprendido a dividir los componentes en:
Sin embargo, es un criterio muy personal, puede haber muchas formas de pensar en esto.
Hay un principio muy simple que puedes seguir: Un componente debe de encargarse de sus propias cosas, no de las de sus padres, no de las de sus hijos, y si aun así hace demasiadas cosas, tal vez es hora de dividirlo en subcomponentes, aunque estos subcomponentes solo se usen para armar este componente.
Hay que pensar mucho en la reusabilidad, si el componente no contiene a otros, debe ser más reusable y agnóstico, a medida que contiene a otros que contienen a otros, va tomando la lógica de negocios de la aplicación.
Por ejemplo, Componente base: un botón, un dropdown. Ambos son simples y agnósticos al negocio.
Componente de alto nivel: carrito de compra. Incluye lógica de negocio en su definición y código.
Hacer un componente base muy complejo, implicaría poca reusabilidad, mucho código que mantener.
Hacer un componente de alto nivel muy reutilizable, podría hacer que nuestras aplicaciones sean demasiado genéricas con experiencias de usuario muy pobres, por ejemplo, poner un simple textarea con capacidad de leer Markdown (altamente reutilizable), es mucho más pobre en UX que un editor como Google Docs (más específico).
cada vez me gusta menos Vue.js
Vengo del jsx de react.
siento que el framework de vue, obliga al desarrollador a seguir un estilo de programacion orientado a html.
si vienes del mundo de html o de template engines te resulta familiar.
pero la verdad es que cada vez vemo mas framework related en la UI, cosas como slot por ejemplo. yo esperaba solo colocar mi componente (header) y listo, pero tengo que pasar por el boilerplate de hacer un slot.
Pues me agradaría una opción tipo youtube de me gusta o no me gusta, porque hay cosas muy confusas y no es por falta de conocimiento, sino por el ritmo y los brincos entres explicación y explicación.
++npm run lint ++ te solucionará muchos errores, yo por mi parte en el package.json cambie el run serve por: **"serve": "npm run lint && npm run lint --fix && vue-cli-service serve", ** de esta manera si tengo errores, solo vuelvo a ejecutar el run serve y listo