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

4 minuto(s)

Demo

En la parte anterior llamada Como Crear una Página Web con Vue JS 2.6.11 y Vuetify 2.3.10 – Parte 1 iniciamos con los primeros pasos del proyecto, creamos un nuevo proyecto con Vue JS y luego desplegamos o integramos Vuetify, en esta parte 2 crearemos el menú y el footer, estos 2 elementos los usaremos en todas las páginas, vamos con ello.

Partes

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

Asimismo te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:

Spotify SoundCloud

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

Vamos a comenzar creando 2 elementos importantes de toda página web y que usaremos en todas las páginas, me refiero al menú y al footer, estos elementos y la mayoría de elementos en la página web los crearemos como componentes.

Menú

Creo un nuevo archivo para mi componente Menú llamado Menu.vue en src > components > Menu.vue


Abro el archivo Menu.vue y comienzo agregando en el template lo siguiente.


Debajo de la etiqueta <template></template> colocamos el siguiente código de Vue JS en las etiquetas <script></script>


Y debajo de la etiqueta <script></script> colocamos los siguiente estilos CSS.


Mas adelante integraremos todos los componentes, pero para tener una idea el menú se debe ver de la siguiente manera.

Ahora pasaremos a crear el componente Footer o pie de página.

Footer

Para este elemento creo un nuevo archivo que será mi componente Footer llamado Footer.vue en src > components > Footer.vue


Abro el archivo Footer.vue y comienzo agregando en el template lo siguiente.


Debajo del template, agregamos el siguiente código Vue JS.


Aún no hemos hecho la integración de los componentes, pero para tener una idea el footer con el menú se deben ver de la siguiente manera.

Bueno hasta aquí terminamos con esta segunda parte en donde creamos el Menú y el Footer, los cuales usaremos en todas las páginas. 

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 tercera parte crearemos el contenido de la página Home.
  • 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.