Icono del sitio Blog Nube Colectiva

Como Crear una Página Web con Vue JS 2.6.11 y Vuetify 2.3.10 – Parte 6 (Final)

Demo Github

En la aterior parte llamada Como Crear una Página Web con Vue JS 2.6.11 y Vuetify 2.3.10 – Parte 5, creamos el contenido para la página Servicios, mediante los componentes SobreNosotros y GaleriaServicios. En esta parte 6 y última, vamos a crear el contenido de la página Contacto, con elementos para que los usuarios contacten a la organización, vamos con ello.

Partes

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

Asimismo te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos)” “Ventajas y Desventajas de Usar 2 o Más Monitores Para un Desarrollador” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor 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 6 (Final).

Contacto

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

Ahora pasaré a crear el primer elemento de la página Contacto que será un texto de introducción a esta página.

Introduccion a Contacto

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

Ahora abro el archivo IntroduccionContacto.vue y dentro de las etiquetas <template></template> agrego un v-container y dentro de el coloco un encabezado h1 con el texto Contacto, debajo coloco un texto de introducción a esta página con los medios para contactar a la organización. 

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

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

Bien, ahora pasemos al siguiente componente que contendrá un formulario de contacto, algunos datos de contacto y las redes sociales de la organización. 

Formulario, Datos de Contacto y Redes Sociales

Para esta sección voy a colocar 3 columnas, una al lado izquerdo para el formulario de contacto, otra al lado derecho para los datos de contacto y redes sociales y una columna en medio de estas 2 columnas, la cual servirá como divisor de ambas columnas.

Creo un archivo llamado FormularioDatosRedes.vue en pagina-web-vuejs-vuetify > src > components > Contacto > FormularioDatosRedes.vue

Abro el archivo FormularioDatosRedes.vue y dentro de las etiquetas <template></template> coloco al lado izquierdo un formulario de contacto. 

Si voy al navegador debería de ver el formulario de contacto que acabo de agregar:

Asimismo dentro del archivo FormularioDatosRedes.vue y dentro de las etiquetas <template></template> coloco al lado derecho los datos de contacto de la organización y debajo sus redes sociales. 

Igualmente si voy al navegador, debería de ver al lado derecho los datos de contacto y las redes sociales de la organización:

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

Nota: Para la validación de los campos del formulario, estoy usando VeeValidate, el cual es un framework de validación de formularios basado en plantillas para Vue.js

Bien ahora voy a colocar un mapa que servirá para mostrar la ubicación de la organización.

Mapa

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

Abro el archivo Mapa.vue y dentro de las etiquetas <template></template> coloco un elemento iframe con un mapa de google. 

Y si voy al navegador, debería de ver el mapa de google que he agregado:

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

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

Ahora abro el archivo Contacto.vue y dentro de las etiquetas <template></template> aparte del Menú y el Footer, agrego los componentes que he creado anteriormente, estos son IntroduccionContacto, FormularioDatosRedes y Mapa 

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

Si ejecutamos el servidor local mediante el siguiente comando. 

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

Producción

Una ves que ya tengo creado todo el proyecto, voy a pasarlo a producción, es decir compilar los archivos del proyecto y dejarlos listos para subirlos a un servidor.

Primero debo de editar el archivo vue.config.js que se encuentra en el directorio principal del proyecto.

Abro el archivo vue.config.js y en su interior debo de ver el siguiente contenido:

Entonces dentro de module.export agrego la opción publicPath con un valor vacío:

Grabo el archivo, ahora ya he dejado el proyecto listo para compilarlo.

Para generar o compilar los archivos de mi proyecto, ejecuto el siguiente comando en mi consola de comandos:

Luego de ejecutar el comando anterior, Vue me creo un directorio con el nombre /dist, en este directorio se encuentran todos los archivos del proyecto, listos para subirlos a mi servidor.

Los archivos que se encuentran en el directorio /dist los puedes subir a tu servidor mediante un FTP como Filezilla. También existen otras maneras de subir los archivos a un servidor. 

Con esto entonces hemos terminado el proyecto, hemos creado una web con Vue y Vuetify, esta web consta de 4 páginas. El aprender a como crear una web con estas tecnologías, te servirá como base para crear páginas web más complejas.

Al inicio de cada Parte del tutorial, he colocado una Demo y en esta sexta y última parte, he colocado el código del proyecto alojado en un repositorio de GitHub.

Nota (s)

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

Salir de la versión móvil