Instalación y conceptos iniciales
Tags: spanish, webdev, vue
Published: 2023-06-19 13:16:43

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 <a href='https://dowar.xyz/blog/post/21' target='_blank'>post</a> 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

```bash
pnpm create vue
```

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

```bash
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

```bash
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 <a href="https://www.youtube.com/watch?v=Fr5QGdJZBVo&ab_channel=KikoPalomares" target="_blank">video</a>.

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