Como Crear una Página Web con Vue JS 2.6.11 y Vuetify 2.3.10 – Parte 4

Vue JS | | Comunidad: Crear un Post, Eventos Devs, Foro

En la parte anterior de este tutorial creamos el contenido para nuestra página principal o Home, dentro de ella agregamos un Carousel que muestra imágenes enlazadas a otros contenidos que los usuarios pueden ver y hacerles clic si desean. Asimismo agregamos una sección de servicios destacados y como detalles adicionales colocamos un formulario para que los usuarios se suscriban al Newsletter o boletín de novedades, en esta Parte 4, vamos a crear el contenido para la página Nosotros, vamos con ello.

Partes

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casa”:

Spotify: Sound Cloud: Apple Podcasts

Bien ahora continuemos con el Post: Como Crear una Página Web con Vue JS 2.6.11 y Vuetify 2.3.10 – Parte 4.

Tal como mencione en el párrafo de introducción de este Post, vamos crear el contenido para nuestra página Nosotros, lo primer que haré es colocar un texto fake (Loremp Ipsum) que explica supuestamente la información sobre la empresa.

Nosotros

Igual que con la página Home, para mantener un orden voy a crear un directorio llamado Nosotros dentro del directorio components, en el colocaré todos los componentes que formarán parte del contenido de la página Nosotros.

Ahora pasaré a crear el primer elemento de la página Nosotros que será un Texto acerca de la empresa o el proyecto. 

SobreNosotros

Creo un archivo llamado SobreNosotros.vue dentro de pagina-web-vuejs-vuetify > src > components > Nosotros > SobreNosotros.vue 

Abro el archivo SobreNosotros.vue y dentro de las etiquetas <template></template> agrego un v-container y dentro de el coloco un encabezado h1 con el texto Nosotros, debajo coloco al lado izquierdo lo que seria una descripción sobre la empresa (coloco texto fake) y al lado derecho una imagen referencial. 

A continuación el código completo del archivo SobreNosotros.vue

Puedes ver al final del código anterior, he colocado el nombre SobreNosotros para este componente, si le ponía de nombre Nosotros, podría haber un conflicto con el nombre del componente principal que también se llamará Nosotros y lo crearemos mas adelante.

Al final de este Post integraré todos los componentes de la página Nosotros, pero para tener una idea de como se ve la página hasta ahora, veamos la siguiente imagen.

Ahora pasemos al siguiente componente que contendrá información adicional sobre la empresa.

Información Adicional

En esta sección voy a colocar 3 columnas que contendrán información sobre la Misión, Objetivo y Visión de la empresa. Creo un archivo llamado InformacionAdicional.vue en pagina-web-vuejs-vuetify > src > components > Nosotros > InformacionAdicional.vue 

Abro el archivo InformacionAdicional.vue y dentro de las etiquetas <template></template> coloco 3 columnas para la información sobre la Misión, el objetivo y la visión de la empresa. Cada sección tiene una imagen que hace referencia a dicha información.

A continuación el código completo del archivo InformacionAdicional.vue

Luego de esta sección integraré todos los componentes de la página Nosotros, pero para tener una idea de como se ve la página hasta ahora, veamos la siguiente imagen.

Bien entonces ya tenemos creado entonces todo el contenido de la página Nosotros, pero para que esta página pueda verse bien con todos sus elementos voy a integrar todos los módulos o componentes, para esto creo un archivo llamado Nosotros.vue en pagina-web-vuejs-vuetify > src > components > Nosotros.vue 

Abro el archivo Nosotros.vue y dentro de las etiquetas <template></template> aparte del Menú y el Footer, agrego los componentes que he creado anteriormente, estos son el SobreNosotros e InformacionAdicional

Paso seguido, dentro de las etiquetas <script></script> importo los componentes y defino el título de la página Nosotros.

Y si ejecuto el servidor local mediante el siguiente comando.

Y voy a la ruta local http://localhost:8080/ debería de ver la página Nosotros con todos sus elementos correspondientes.

Bueno hasta aquí terminamos con esta 3ra parte en donde creamos el contenido de la página Nosotros con todos sus elementos respectivos.

Ten Paciencia, lo que quiero es que conozcas bien como crear este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente parte de este tutorial, crearemos el contenido de la página Servicios.
  • El botón Nosotros del menú no se puso activo, esta configuración la veremos en la última parte de este tutorial, ya que cada botón debe mantenerse activo cuando se le hace clic y por ende se ingresa a la página correspondiente.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments