Instalación y conceptos iniciales

Bienvenidos al primer capítulo de este curso con el que iniciaremos aprendiendo a como generar un proyecto, conceptos básicos y la estructura del mismo.

Requisitos

• Para generar un proyecto de Vue es necesario que contentos con gestor de dependencias para javascript tales como NPM, yarn o PNPM siendo mi recomendación este último del cual dispongo un post donde explico como instalarlo.
• Como recomendación personal recomiendo tener instalada alguna extensión en nuestro editor que funcione como lsp de Vue tal como volar, ya que esta nos proporcionará varias funciones tales como
  • Detección de errores.
  • Navegación entre componentes.

Nota
El gestor de paquetes que estare usando sera pnpm y los comandos que se indiquen a lo largo de este curso puede variar.

Creación del proyecto

Accedemos a nuestra terminal y con nuestro gestor de paquetes ejecutamos

pnpm create vue

Con esto se nos proporcionará un pequeño cuestionario que nos permitirá adaptar el proyecto a nuestras necesidades

Project name: … <your-project-name>
Add TypeScript? … No / Yes
Add JSX Support? … No / Yes
Add Vue Router for Single Page Application development? … No / Yes
Add Pinia for state management? … No / Yes
Add Vitest for Unit testing? … No / Yes
Add an End-to-End Testing Solution? … No / Cypress / Playwright
Add ESLint for code quality? … No / Yes
Add Prettier for code formatting? … No / Yes

Por el momento no te abrumes con el significado de estas, ya que lo iremos aprendiendo a lo largo del curso.

Accedemos al directorio de nuestro proyecto e instalamos las dependencias

cd <nombre del proyecto>
pnpm i

Estructura

Nota
Dependiendo de lo que respondiste en el cuestionario anterior podría variar la estructura existiendo mas o menos directorios/ficheros.

• Index.html Para el que no lo sepa Vue funciona bajo la estructura de un SPA, aunque se puede trabajar de la forma tradicional, está pensado para funcionar como una SPA y es aquí donde colocaremos toda información relacionada con nuestro sitio web como el nombre, icono(el que aparece en la pestaña), lenguaje en el que está desarrollado, entre otras cosas. Este lo podremos encontrar en la raíz de nuestro proyecto.
• package.json En él podremos encontrar una lista con todos los paquetes necesarios para el funcionamiento de nuestro proyecto.
• public/ En él colocaremos aquellos assets que no requieran procesamiento, por ejemplo el icono del sitio web.
• tsconfig Aquí colocaremos toda la configuración referente a TypeScript en el caso de que en el cuestionario seleccionemos la integración del mismo.
• vite.config Los plugins y configuraciones referentes a Vite las colocaremos aquí.
• src/ Este es el directorio donde pasaremos la mayor cantidad de tiempo, ya que es aquí donde colocaremos los assets, vistas, componentes, rutas, etc.
• src/assets Los assets son básicamente todos los ficheros requeridos por nuestro proyecto como imágenes, videos, etc.
• src/components La forma de funcionar de este tipo de frameworks es bajo el uso de componentes, los cuales son piezas de código que podremos reutilizar dentro de nuestras vistas.
• src/views Las vistas es lo equivalente a las páginas que podremos encontrar en cualquier otro sitio elaborado con HTML.
• src/router/index En un punto anterior mencioné que Vue puede trabajar como un SPA y esto se logra gracias al router, ya que este contiene todas las rutas de nuestro.
• src/App.vue Este es el componente raíz el cual se encarga de cargar elementos como routerview que es donde se renderizan nuestras vistas.
• src/main Aquí podremos encontrar la lógica de nuestro proyecto Vue porque podremos encontrar el archivo CSS, la importación del App.vue y el router, entre otras cosas.

Conceptos

SPA Una Single Page Aplication es definido como una aplicación de una sola página, como vimos anteriormente podremos encontrar un index.html y un App.vue, cuando accedemos a una ruta de nuestro router esta nos redirigirá a la vista correspondiente(view) la cual será renderizada en un el App.vue y posteriormente este mismo en el index.html, a este tipo de aplicaciones se les conoce de esta forma, ya que todo se renderiza dentro del mismo archivo html en lugar de tener varios como un sitio web convencional.
Para más información visitar el siguiente video.

• ruta Las rutas son el equivalente a las direcciones web, las cuales hacen referencia a los diferentes archivos HTML de nuestro sitio web, pero en este caso referencian a nuestras vistas.
• vite es herramienta de compilación que fue creada por el mismo desarrollador de Vue, antes de la existencia de este se usaba webpack, básicamente este prepara nuestro proyecto para poder ser alojado en un hosting. TypeScript básicamente es un JavaScript mejorado, ya que añade funciones como el tipado el uso de interface, entre otras cosas.

Final

Trate de ser lo más claro y conciso posible, cualquier duda o aclaración siéntete libre de contactarme, nos vemos en un siguiente post.