Header y contentido

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 8

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Santiago Gonzalez

hace 3 años

Estilos 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>

Jesus Abel Jimenez Bracho

hace 3 años

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>>

Victor Roberto López Marroquín

hace 2 años

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/

Santiago Gonzalez

hace 3 años

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>

fjccandelario

hace 3 años

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.

josué

hace un año

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.

marioamaciasortiz

hace un año

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.

Jose Alejandro Pantoja Giraldo

hace 2 años

++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

Si ya tienes una cuenta,

Curso Práctico de Vue.js

Header y contenido