Creando un proyecto con Vue JS

Vue Js es considerado un Framework progresivo en el cual se van agregando módulos de acuerdo a la necesidad que vaya surgiendo. Al trabajar con este framework nos encontraremos que es muy similar a Angular y/o React JS.

Vue Js, al igual que otras herramientas, es ideal para el desarrollo de aplicacaciones tipo SPA.

Pero, ¿qué es una SPA?

Una Single-Page Application (SPA) es un tipo de aplicación web que ejecuta todo su contenido en una sola página. Y funciona más o menos así:

• Al abrir la página web completa se irá cargando el contenido HTML, CSS y Javascript.
• Al abrir otra sección no se cargará de nuevo todo el contenido, solo esa sección.
• Así se obtienen diferentes vistas sobre la misma página.
• Es una forma dinámica de trabajo. 

¿Qué se necesita antes de usar este framework (y cualquier otro similar)?

1. Tener nociones de HTML.
2. Tener nociones de CSS.
3. Tener nociones de Javascript.

Un framework, en teoría, nos facilitará la existencia a la hora de desarrollar una aplicación. Si no comprendemos lo básico y algo más, no lo podremos usar eficientemente. Es como el chiste de "10 horas de desarrollo ahorrán 1 hora de lectura de la documentación".

Instalaciones necesarias

En un entregas pasadas vimos como instalar Vue JS. Sin embargo, no hace daño recordar algunas cosas. Para usar Vue JS necesitaremos instalar:

1. npm.
2. Node JS.

Al instalar Node JS tendremos npm instalado. Comprobaremos la instalación:

npm:

npm -v
10.8.1

Node JS:

node -v
v20.16.0

Ahora procederemos a instalar Vue JS:

npm install -g vue

Comprobamos la instalación:

npm list -g
C:\Users\HP\AppData\Roaming\npm
`-- vue@3.4.38

Nota: Existe una herramienta llamada Vue CLI, pero no la usaremos en este post.

Creando un proyecto con Vue JS

Abriremos una terminal y teclearemos lo siguiente:

npm create vue@latest

Al iniciar nos pedirá el nombre del proyecto y si queremos o no agregar algunas características al proyecto. Aquí dejamos un ejemplo:

✔ Project name: … <auditor>
✔ 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 / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Al finalizar ejecutaremos estos comandos:

cd auditor
npm install
npm run dev

1. El primer comando nos ubicará en el directorio del proyecto creado. 
2. El segundo hará que se instalen las dependencias del proyecto.
3. El tercero ejecutará el proyecto en modo desarrollador.

En mi caso, abriré el localhost en el puerto 5173, ya que es el puerto disponible en mi máquina.

Estructura del proyecto Vue JS creado

Esta es la estructura (omitiendo algunos archivos):

auditor/
   - index.html
   - package.json
   - README.md
   - node_modules/
   - public/
   - src/
      - assets/
          - main.css
          - base.css
      - components/
      - App.vue 
      - main.js

Cosas importantes que notar:

index.html
  ^
  |
main.js
  ^
  |
App.vue
  ^
  |
Componente.vue

• El archivo index.html es el más importante, de preferencia no se debe editar.
• El archivo main.js contendrá el componente principal (App.vue).
• En el componente principal (App.vue) se pueden integrar otros componentes. 

Estructura de un componente en Vue JS

Cualquier componente creado tendrá esta estructura:

<script>
  // Código Javascript
</script>

<template>
  <!--  Código HTML o plantilla web -->
</template>


<style>
  // Código CSS
</style>

Es importante decir que un componente actúa de manera reactiva. Es decir, reacciona de acuerdo a los eventos que va disparando el usuario al interactuar con la página.

Creando un componente

En la carpeta components crearemos uno nuevo denominado ``BienvenidaComponent.vue`` (importante la extensión *.vue).

BienvenidaComponent.vue

<script>
  export default{
    name:'BienvenidaComponent',
    data(){
      return{
        welcome:'Bienvenidos a Vue JS.',
        subtitle: 'Auditor de datos.',
        prrf1_color: 'color:#C3C1C1',
        prrf1: 'Este es un primer proyecto usando Vue JS.',
        isActive: true,
      }
    }
  }
</script>


<template>
    <div class="bienvenida-component">
      <h1>{{ welcome }}</h1>
      <h2>{{ subtitle }}</h2>
      <h3 id >{{ isActive ? 'DEV esta activo.' : 'DEV esta inactivo.' }}</h3>
      <p v-bind:style='prrf1_color' >{{ prrf1  }}</p>
    </div>
</template>
  
<style>
h2{
  color:lightblue;
}
</style>

En este componente se puede ver que creamos:

• Tres variables de mensaje  (welcome, subtitle, prrf1).
• Una variable booleana (isActive).
• Una variable con valores CSS (prrf1_color).

Este componente se agregará al principal ``App.vue``

App.vue

<script>
import BienvenidaComponent from './components/BienvenidaComponent.vue';

export default{
  name:'App',
  components:{
    BienvenidaComponent
  }
}
</script>

<template>
  <img src="/src/assets/logo.svg" width="100" height="100" alt="Logo de Vue JS" title="Logo de Vue JS">
  <BienvenidaComponent/>
</template>


<style>

</style>

¡Hemos creado nuestro primer componente Vue JS!

Al editar el proyecto, se recompilará y mostrará el nuevo componente.

Continuaremos en siguientes entregas.

Enlaces:

https://alquimistadecodigo.blogspot.com/2018/06/vue-js.html
https://alquimistadecodigo.blogspot.com/2019/02/instalar-vue-cli.html
https://alquimistadecodigo.blogspot.com/2019/01/vue-js-v-model-v-if-v-for.html
https://alquimistadecodigo.blogspot.com/2021/10/react-js-en-un-vistazo.html
https://alquimistadecodigo.blogspot.com/2018/06/vue-js.html
https://elabismodenull.wordpress.com/2017/04/21/vuejs-the-progressive-javascript-framework/
https://digital55.com/blog/que-son-single-page-application-spa-desarrollo-elegido-por-gmail-linkedin/