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

8 minuto(s)

Demo

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. 

Sobre Nosotros

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.

Al final de la imagen anterior, puedes ver que hemos colocado el formulario de Newsletter que creamos en la Parte 3 de este tutorial.

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/nosotros 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.
  • 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.