• ENTRAR
  • No hay productos en el carrito.

Como separar y estructurar componentes

Viendo 2 publicaciones - del 1 al 2 (de un total de 2)
  • Autor
    Publicaciones
  • #15946

    osqui.botteri
    Participante

    Hola,

    Estaba viendo el curso, y me  surgio la duda de como separar y estructurar los componentes de las distinas paginas/secciones de una SPA. Es decir, en una aplicacion web completa desarollada con vue, un componente y una pagina son lo mismo ? Por ejemplo, yo podria tener la pantalla home, contacto, etc.. cada uno de estas son un componente ?
    Estuve buscando informacion en internet y termine con mas dudas que antes. Ya que veo que no hay un “standard” a seguir.. sino mas bien “recomendaciones” de distintas personas que algunos siguen y otros no.
    Veo que algunos dentro de la carpeta “src” tienen la carpeta “components” donde alojan todos los componentes generales que podria tener una app y por otro lado, en la carpeta “views” todas las vistas que se manejan con vue-router. Estas vistas tienen dentro los componentes que se fueron creando dentro de la carpeta “components”. Eso esta bien ? es la practica que mas se trata de seguir ?

    Por otro lado tambien veo una falta de organizacion en la separacion de componentes.. es decir, suponiendo que yo tengo un listado de posts a mostrar. Algunos crean el componente “post” y “postList” (como en el tutorial con el “todo list”) y otros crean directamente “posts”.. cual de estas dos practicas es la mas recomendada ? porque las dos andan evidentemente, pero supongo que alguna es mejor que otra a nivel conceptual.

    Pregunto esto ya que para complementar el curso, estoy armando una especie de blog y me encuentro con problemas a la hora de separar los componentes, siento que tengo todo muy acoplado, adjunto una imagen del wireframe que prepare para que se entienda bien lo que trato de preguntar.

    Wireframe

     

    Como se ve en la imagen, tengo un header que se va a estar mostrando constantemente, asique cree un componente “header” y lo inclui dentro del App.vue.

    El problema que tengo es con lo de abajo, el “home page” es un componente que a la vez utiliza el componente “post list” y “nav bar” o todo el contenido de homepage es un solo componente?

    Dentro del “nav bar” quiero tener un boton de “crear nuevo” y debajo un listado de categorias.. para poder estructurar esto tendria que crear el componente “nav bar” y por otro lado el componente “categories” o todo seria un solo componente?

    Nose si se entiende lo que trato de preguntar, espero que si. Creo que el curso deberia hacer mas hincapie en estos conceptos ya que son la base de todo y siento, a mi parecer, que el curso se saltea varios de estos planteos iniciales. Un saludo

    #15947

    Cursosdesarrolloweb
    Jefe de claves

    Buenas tardes Oscar,

    En Vuejs 2 no hay un estándar, pero sí recomendaciones.

    Se pueden hacer las cosas de muchas formas, todo componentes, componentes y views o componentes y pages, por ejemplo.

    En Nuxtjs se utilizan pages, cada una de ellas representa una ruta, a su vez, cada page hace uso de los componentes que pueda necesitar, todos ellos ubicados dentro del directorio components.

    Mi recomendación sobre los componentes basada en mi experiencia y en todo lo que sé sobre Vuejs 2 a lo largo de estos 5 años utilizándolo  es la siguiente.

    Si tienes posts, crea un directorio llamado Post, al detalle de un post llámalo Post.vue o PostDetail.vue o PostSingle.vue, cómo prefieras, al formulario de Posts llámalo PostForm etc, es decir, utiliza el prefijo Post y un sufijo que describa para qué sirve.

    Tal y cómo explico en todos mis cursos sobre Vuejs 2, crea tantos componentes como necesites para después llamarlos y reutilizar código de forma sencilla, así evitas repetir código, no es malo utilizar varios componentes dentro de un componente o página.

    Referente a tu duda, con todo lo anterior deberías poder solucionarla, en este curso desarrollamos una aplicación completa además de ver otros temas interesantes para iniciar en este Framework, slots, eventos, data-binding etc, pero si quieres dedicarte de forma profesional y conocer Vuejs 2 a fondo te recomiendo que revises los otros cursos, en especial este, es un curso bastante más avanzado, en él realizamos una aplicación más completa.

    Si tienes dudas sigue respondiendo a este hilo.

    Saludos.

Viendo 2 publicaciones - del 1 al 2 (de un total de 2)

Debes estar registrado para responder a este debate.

Síguenos en las redes sociales para estar al tanto de los últimas novedades :)

Facebook
Facebook
Google+
Google+
https://www.cursosdesarrolloweb.es/forums/topic/como-separar-y-estructurar-componentes">
Pinterest
Pinterest
top
Cursosdesarrolloweb ©. Todos los derechos reservados.
📢 Inscríbete a cualquier curso por solo 10€ con acceso inmediato y para siempre📢
🌍Los cursos gratuitos son exclusivos de esta plataforma, ÚLTIMOS CURSOS EN 4K🌍
+ +

Login

Create an Account Back to login/register