Vue 3¶

Frameworks de font-end¶

Els frameworks de front-end són biblioteques de JavaScript que ajuden a crear pàgines i aplicacions web, fent que pels desenvolupadors sigui més fàcil construir les interfícies d'usuari.

Actualment els frameworks de front-end de codi obert més populars són:

Angular
Desenvolupat per Google el 2016 com a versió 2 d'AngularJS, creat també per Google el 2010. Els canvis entre les dues versions van ser tan grans que es va decidir mantenir-los com dos productes separats amb noms lleugerament diferents: AngularJS per la versió 1 i Angular per la versió 2 i posteriors.
Es basa en TypeScript i implementa una arquitectura MVC. És un framework pesat, ja que té moltes característiques integrades (validació, enrutament, gestió d'estat, etc.) i és especialment adequat per crear aplicacions grans.

React
Desenvolupat per Facebook (actualment Meta) l'any 2013.
Inicialment es va crear per ús intern per integrar-lo a productes de la pròpia companyia: web i app de Facebook, més tard Instagram, etc. Posteriorment es va alliberar el codi i va obtenir gran popularitat entre la comunitat de desenvolupadors.
En contrapartida a Angular, és un framework minimalista, lleuger i amb poques característiques integrades de sèrie, però ampliable a partir de paquets de tercers.

Vue
Desenvolupat el 2014 per Evan You, antic treballador de Google.
El va crear tenint en compte el funcionament d'AngularJS però mantenint un codi més lleuger. En aquest sentit està en un punt mig entre Angular i React, i incorpora diverses característiques a través de connectors externs oficials com un router (Vue-router) o gestió d'estat (Pinia).
Implementa el patró MVVM (Model-View-ViewModel), que és una variació del MVC:

El model representa la capa de dades
La vista està formada pels elements visuals que representen la infomació del model, rep interacció de l'usuari a través d'esdeveniments i en traspassa la gestió a la vista-model a través enllaços de dades (data-bindings)
La vista-model comunica la vista i els seus enllaços de dades amb el model, de manera que la vista no rep actualitzacions a través del model com amb MVC, sinó que les obté a partir de propietats de la vista-model.

MVC	MVVM

Què és Vue¶

Vue és un framework de JavaScript per crear interfícies d'usuari.
Funciona com una capa per sobre de l'HTML, CSS i JavaScript estàndard i proporciona un model de programació declarativa i basada en components.

Característiques de Vue

És un framework progessiu
No estem obligats a crear la nostra aplicació al 100% amb Vue, sinó que podem programar-ne només algunes parts, o bé partint d'un codi existent adaptar-lo de manera progressiva, intercalant el codi de Vue amb el de JavaScript estàndard.
Això el fa molt convenient per migrar i adaptar projectes existents en altres tecnologies i passa-los a codi Vue progressivament.
És un framework unopinionated
Vue, com també React, és un framework "sense opinió", que deixa llibertat al programador sobre com fer les coses o incorporar les característiques que necessiti a cada projecte.
Per contra, Angular es considera un framework opinionated, ja que és estricte en quant a l'arquitectura i la forma concreta d'utilitzar les tecnologies i característiques que incorpora.
Utilitza representació declarativa
Vue amplia l'HTML estàndard amb una sintaxi de plantilles, que ens permet indicar a través d'etiquetes què representarà l'HTML segons l'estat del codi i el model de dades.
Proporciona reactivitat
Vue fa un seguiment automàtic de tots els canvis que afecten al model de dades, i actualitza el DOM de manera ràpida i eficient en el moment en que es produeixen.
Disposa de Components de Fitxer Unic (SFC, Single-File Components)
En els projectes en què treballem amb transpilació, podem crear cada component per separat en un únic fitxer (SFC) amb l'extensió ".vue", que encapsula la lògica (codi), plantilla (HTML) i estils (CSS) del component.
Corba d'aprenentatge suau
La corba d'aprenentatge de Vue és la més assequible d'entre els 3 frameworks més populars (Angular, React i Vue), tot i compartir molts conceptes bàsics entre ells (components, reactivitat, enrutament, etc.), el qual el posiciona com un molt bon punt de partida per aprendre altres frameworks si ens és necessari.

Pronunciació

Oficialment "Vue" es pronuncia /vjuː/ com view (vista) en anglès.

Enllaços de referència

Documentació oficial
Awesome Vue.js - Índex de recursos per Vue
Framework Vue.js - Guia introductòria a Vue en castellà

Creació d'un projecte amb Vue 3¶

Passos a seguir:

Instal·lar node.js i npm a nostre sistema operatiu

Node.js és un entorn d'execució de JavaScript multiplataforma i de codi obert.
Funciona amb el motor de JavaScript V8 que utilitza Google Chrome, però fora del navegador.

Descarregarem i instal·larem la darrera versió estable de la web oficial.
La instal·lació de node.js ja incorpora l'administrador de paquets npm (Node Package Manager). npm proveeix una gran biblioteca de paquets instal·lables dins d'un projecte en JavaScript, gestionant-ne les dependències i el control de versions.

Comprovarem que la instal·lació sigui correcta executant:
```
$ node --version
$ npm --version
```
I verificant que tots dos ens retornen un número de versió i no un error.

Crear una aplicació Vue

Crearem una aplicació de pàgina única (SPA) amb un entorn basat en Vite.js.

Vite.js és un empaquetador (bundler) de JavaScript, similar a webpack o rollup però més ràpid i eficient. Vite va ser creat el 2020 per Evan You (desenvolupador de Vue.js) com a substitut de webpack, i actualment és un dels servidors de desenvolupament local més populars.

Per crear un projecte de Vue utilitzarem npm i l'script create-vue executant la següent comanda:

npm create vue@latest

Atenció!

És important posar sempre el sufix @latest (o @legacy) al final de la comanda, ja que si no npm podria resoldre la petició a una versió en caché o bé obsoleta del paquet.

Projecte d'exemple

La comanda anterior crea un projecte que conté un codi d'exemple bàsic d'introducció a la sintaxi de Vue.

Si el que volem és crear un projecte buit, la comanda que hem d'utilitzar és:

npm create vue@latest -- --bare

Si estem utilitzant el PowerShell de Windows, la comanda haurà de ser:

npm create vue@latest '--' --bare

Responem les diferents preguntes que se'ns mostren a continuació:

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-project
✔ 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
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /home/user/vue-project...

Done. Now run:

cd vue-project
npm install
npm run dev


Project name	Nom del projecte (per defecte, vue-project) Es crearà un directori amb aquest nom dins de l'actual
Add TypeScript	Suport pel llenguatge TypeScript, que amplia JavaScript amb sintxai addicional i requeriment de tipus
Add JSX Support	JSX és una extensió per JavaScript per escriure HTML, és útil per programadors que venen de React
Add Vue Router	Permet que una aplicació de pàgina única (SPA) pugui canviar entre diferents pàgines utilitzant vistes
Add Pinia	El gestor d'estat oficial de Vue, permet gestionar magatzems de dades molt fàcilment sense haver de passar-los entre components, és útil sobretot per aplicacions molt grans
Add Vitest	Framework per fer tests unitaris
Add an End-to-End Testing	Eines per fer proves automàtiques de les aplicacions en navegadors virtuals
Add ESLint	Eina per revisar el codi en temps real i detectar i corregir possibles problemes

Instal·lar els mòduls de node

Un cop creada l'estructura de l'aplicació, cal descarregar els mòduls que seran necessaris per desenvolupar.

cd vue-project

Ens situem al directori arrel del projecte

npm install

Després d'executar aquesta comanda es descarregaran els mòduls bàsics per crear una aplicació amb Vue i es guarden al directori node_modules.

npm run dev

Amb aquesta instrucció posem en marxa el projecte en mode de desenvolupament.
Les opcions possibles són:

Ordre des de línia de comandes
`npm run dev`	Posa en marxa el projecte dins del navegador en mode de desenvolupament amb recàrrega automàtica. Per defecte s'incia a l'adreça http://localhost:5173/
`npm run build`	Genera la versió de producció del projecte per fer-ne el desplegament. Per defecte es crea dins del directori `dist`
`npm run preview`	Permet previsualizar la versión de producció que hem generat amb `npm run build`

Instal·lar les extensions oficials per desenvolupadors (opcional, però recomanat)
- Per VS Code: Vue - Official
  Disposem d'una extensió oficial per VS Code que incorpora autocompletat, ressaltat de sintaxi, format de fitxers SFC (.vue), etc.
  Es pot instal·lar des del mateix VS Codi buscant l'extensió 'Vue official' o 'Volar' (el nom que tenia anteriorment), o bé des del Marketplace de VS Code: Vue - Official
- Per navegadors: Vue DevTools
  Extensió pels navegadors Chrome, Firefox i Edge per depurar més facilment components de Vue. La podem descarregar de la seva web oficial i les botigues d'extensions de cada navegador.
Vue DevTools ara ve integrat amb Vite

Des de la versió 3.4 de Vue, aquesta eina ve intregrada a l'entorn de Vite i ja no cal insal·lar-la per separat.

Estructura d'un projecte¶

Generació per producció¶

Quan generem el codi per producció amb npm dev build es tenen en compte els següents paràmetres per defecte:

Paràmetre	Valor	Funció
base	/	Ruta arrel al servidor de producció. Per defecte pressuposa que es farà el desplegament a l'arrel del servidor web. El podem canviar per `./` o una cadena buida per poder utilitzar una ruta relativa.
build.outDir	dist	Directori del projecte on es generarà el codi a desplegar

Llista completa de paràmetres de configuració per Vite

Configuring Vite

Si no farem el desplegament a l'arrel d'un servidor web, voldrem canviar el valor de base. Per fer-ho cal editar el fitxer de configuració de Vite, vite.config.js que es troba a l'arrel del projecte Vue.

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  base: './',
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Accés a APIs a través de proxy¶

Aquesta opció de configuració de Vite ens permet canviar rutes al nostre codi en temps de desenvolupament.
D'aquesta manera, mentre editem el codi podem per exemple accedir a una API a través d'una ruta diferent, per exemple en un servidor de proves, i quan fem el build utilitzar la ruta correcta de l'API de producció.

En aquest exemple, durant el desenvolupament totes les peticions que es facin a /api es canviaran per peticions a http://localhost:8080/, però quan fem el build del projecte el codi generat farà les peticions a /api:

export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:8080/'
    }
  },
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Atenció!

Després de modificar aquesta opció de configuració cal reiniciar Vite perquè tingui efecte.

Documentació de server.proxy

Server Options - server.proxy

Variables d'entorn a fitxers dotenv (.env)¶

Els fitxers .env són una forma de guardar dades sensibles, com ara claus d'APIS, dins de fitxers que sabem que no es pujaran mai a un repositori.
Quan creem aplicacions Vue amb Vite no cal instal·lar cap paquet npm (com ara dotenv) perquè aquesta funcionalitat ja ve inclosa.

El procediment per utilitzar fitxers .env a un projecte Vue és el següent:

Creem un fitxer amb el nom exacte .env a l'arrel del projecte. Important fer-ho on hi ha el fitxer index.html, no dins la carpeta src!
Afegim el fitxer a .gitignore per evitar pujar-lo a repositoris
Dins del fitxer, creem una línia per cada assignació de valor que volem guardar. Totes aquelles que volem que siguin accessibles des de l'aplicació Vue cal que comencin amb el prefix VITE_
```
# Serà accessible des de l'aplicació client Vue
VITE_API_KEY="123456789"

# NO serà accessible des de l'aplicació client Vue
API_KEY="123456789"
```
Des de l'aplicació podem importar les variables d'entorn del fitxer .env a través de l'objecte import.meta.env.
```
<script setup>
  const clauAPI = import.meta.env.VITE_API_KEY
</script>
```