Vue 3

De Wiki do Ciclo ASIR do IES de Rodeira
Saltar á navegación Saltar á procura

Introdución

Vue (pronunciado /vjuː/, como view) é un framework progresivo para construír interfaces de usuario. A biblioteca central está enfocada só na capa de visualización, e é doada de utilizar e integrar con outras bibliotecas ou proxectos existentes.

Vue dispón dun "compilador" que se encarga de transformar as plantillas (compoñentes) de Vue en código JavaScript optimizado que utilizará o navegador para visualizar a páxina, encargándose de procesar as plantillas e os datos para producir o contido.

As distribucións de desenvolvemento de Vue inclúen o compilador, polo que podemos crear e probar a aplicación con ficheiros individuais cos distintos compoñentes da nosa web (arquivos .vue) e probala mediante npm run dev. Con Vue normalmente ven integrado un xestor de proxectos (Vite e Vue CLI) que ademais proporciona un servidor web para poder ir probando o desenvolvemento.

Unha vez rematado o frontend, se "compila" (build) xerando o frontend de produción mediante o comando npm run build. Este comando xerará unha versión da distribución da web dentro da carpeta build que podemos copiar ao raiz do noso servidor de produción.

Elaboración dun Front-End con Vue

Instalación da contorna de desenvolvemento

Para desenvolver un frontend con Vue o mais apropiado e o uso do xestor de paquetes npm dentro da carpeta onde imos desenvolver o frontend, que non ten nada que ver coa carpeta onde se instalará o servizo web de producción. 

npm create vue@latest

Mediante este comando se recopilan todos os módulos necesarios para o desenvolvemento e creación de frontend realizando unha serie de preguntas sobre as tecnoloxías que queremos empregar. E recomendable o uso de TypeScript e ESLint. Normalmente o axeitado e desenvolver mediante VSCode, xa que trae plugins que fan cómodo o desenvolvemento. Vue instalará un compoñente de "Benvida", que será o "frontend por defecto"

Unha vez executado ese comando, se crea a lista de software necesario que podemos instalar no proxecto 

npm install

A estrutura da aplicación na carpeta será similar a esta: 

<proxecto>/
│
├── index.html            // Archivo HTML principal
├── src/                  // Carpeta de código fuente
│   ├── assets/           // Archivos estáticos (imágenes, etc.)
│   ├── components/       // Componentes de Vue
│   ├── views/            // Vistas de la aplicación
│   ├── App.vue           // Componente raíz
│   └── main.js           // Archivo de entrada de JavaScript
│
├── package.json
└── vite.config.ts
└── eslint.config.ts

index.html e o punto de carga do frontend de desenvolvemento (unha vez compilado con npm run prod, se creará unha versión de index.html preparada para o despregamento na carpeta build). O desenvolvemento terá lugar na carpeta src, que se identificará no proxecto como a carpeta @ para as rutas.

Dentro da carpeta src temos o punto de entrada do frontend Vue, que é o arquivo main.ts ou main.js (dependendo de si utilizamos JavaScript ou TypeScript) e App.vue que é o compoñente principal que "debuxará" o frontend a presentar dentro do index.html da páxina.

En App.vue teremos o frontend que se amosará si lanzamos a versión de desenvolvemento mediante npm run dev,

Si queremos poder acceder cun cliente remoto (en outra máquina) debemos modificar a información do ficheiro vite.config.ts: 

vite.config.ts:
import { fileURLToPath, URL } from 'node:url'

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
        host: '0.0.0.0', // Escoitar en todas as interfaces
        port: 8000, // O porto no que se esperan conexións
        strictPort: true, // Opcional: fallará si o porto xa está en uso
    },
})

O punto de entrada dunha aplicación """Vue""" é normalmente un arquivo chamado """main.js""" (ou """main.ts""" se estás utilizando TypeScript). Este arquivo é onde se crea e configura a instancia da aplicación Vue e se monta nun elemento HTML-

Internacionalización

Si queremos que o noso frontend soporte varios idiomas necesitaremos o módulo vue-i18n que podemos instalar con npm install vue-i18n. Este módulo nos proporcionará a posibilidade de utilizar diccionarios en JSON nos que estarán as traduccións das distintas cadeas de texto do front-end situados en src/locales como es.json, gl.json ou en.json. 

{
"Configure":"Configurar",
"Log Out":"Saír",
"Log In": "Iniciar Sesión",
"User":"Usuario",
"Password":"Contrasinal",
"Did you forget your password?":"¿ Esqueciches o teu contrasinal ?",
"Incorrect username or password":"Usuario ou contrasinal incorrectas",
}

Será necesario a carga do módulo i18n no programa principal main.ts, que pode quedar algo similar a esto: 

import App from '@/App.vue';
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';

import en from '@/locales/en.json';
import es from '@/locales/es.json';
import gl from '@/locales/gl.json';

const messages={ en, es, gl };

// Collemos por defecto a linguaxe do navegador
const userLocale = navigator.language || 'gl';

// Crear a instancia de i18n e definir o idioma predeterminado
const i18n = createI18n({
  locale: userLocale, // Idioma predeterminado
  fallbackLocale: 'en',  // Si non atopamos no idioma actual, usamos este
  messages,     // Recursos de tradución
  numberFormats: {
    en: { currency: { style: 'currency', currency: 'USD' } },
    es: { currency: { style: 'currency', currency: 'EUR' } },
    gl: { currency: { style: 'currency', currency: 'EUR' } }
  }
});

const app=createApp(App).use(i18n).mount('#app')

Isto nos proporcionará nas plantillas o método $t(), que se encargará de substituír o texto entre paréntese polo lido do dicionario.

Os Compoñentes Vue

Os frontends construídos en Vue comezan no script main.ts ou main.js coa creación dunha intancia de aplicación mediante a función createApp. Esa aplicación consiste nun compoñente que se incrustará nun elemento do DOM de index.html. Ese compoñente pode facer uso a súa vez de outros compoñentes para conformar o frontend. Aínda que un frontend pode ter varias aplicacións cada unha co seu compoñente raíz, o habitual e ter unha única aplicación.

Un exemplo de compoñente Vue (Vue.js) mínimo que pode ser "incrustado" pode ser este: 

<script setup lang="ts">
    const nome="O meu primeiro compoñente Vue";
</script>
<template>  
   Hola Mundo!!! {{ nome }}
</template>
<style scoped>
</style>

O contido do main.js, podería ser o seguinte: 

import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'   // Importamos o compoñente

const app = createApp(App) // Creamos a aplicación
app.mount("#app"); // Incrustamos o compoñente Vue no index.html no elemento con id "app"

Como podemos observar no compoñente Vue, se aprecian tres seccións diferentes:

<script setup>
Esta sección contén o código javascript que se levará a cabo cando se "monte" o compoñente na páxina, o que normalmente sucede unha única vez. Os compoñentes poden recibir parámetros dende main.ts ou main.js ou dende outro código javascript dun compoñente.
<template>
Contén a plantilla HTML que producirá a presentación a ser incrustada na páxina, reemplazando a información na plantilla segundo a linguaxe de plantillas de Vue.
<style>
Conten o código CSS para a plantilla indicada en <template> Si especificamos scoped os estilos aquí especificados unicamente serán efectivos para esta plantilla, si non, serán efectivos de xeito global.

Options API

Options API é un dos sistemas de deseño de compoñentes que pode usar Vue. Options API é o "modo tradicional", e consiste en definir a lóxica dun compoñente usando un obxecto javascript con distintos métodos e atributos que cubren o ciclo de vida e funcionalidades do compoñente:

name
Este atributo indica o nome do compoñente.
data()
Este método define o estado reactivo local do compoñente. Retorna un obxecto coas propiedades que desexamos sexan empregados no procesamento da plantilla de xeito reactivo.
created()
Este método se executa cando o compoñente é creado.
mounted()
Este método se executa cando o compoñente é montado no DOM.
updated()
Este método se executa cada vez que é necesario actualizar a plantilla.
destroyed()
Este método se executa cada vez que o compoñente se elimina.
provide() / inject
O método provide() permite compartir datos entre compoñentes "pais" e "fillos". provide() Debe retornar un obxecto onde se especifique como atributos a información a compartir. Esta información pode ser accedida polos fillos mediante o atributo inject, que indicará nun array o conxunto de datos "provided" a utilizar.
props
Este atributo especifica os datos (parámetros) que pode recibir o compoñente cando é "incluído" na web.
computed
Este atributo almacena un obxecto que contén métodos que podemos especificar como atributos na plantilla, deste xeito podemos eliminar a lóxica da plantilla deixandoa máis limpa e fácil de manter.
methods
Este atributo almacena un obxecto que contén métodos que podemos chamar dende a plantilla, principalmente como xestores de eventos. Si queremos, podemos usar para o método o mesmo identificador que o atributo que queremos "recalcular", de xeito que se refrescará cando o valor do atributo cambie.
watch
Este atributo almacena un obxecto que contén métodos que "observan" certas propiedades, executando un método cando se produce un cambio. Debemos identificar o método co mesmo nome que o atributo que queremos vixiar, e recibirá como parámetros o valor futuro e o valor actual.
components
Este atributo almacena un obxecto que contén compoñentes dos que queremos poder facer uso no compoñente actual.
mixins
Este atributo é un array que permite reutilizar funcionalidade para que sexa utilizada en varios compoñentes. Permiten compartir métodos, datos e ciclo de vida entre diferentes compoñentes. En primeiro lugar, se debe crar o "mixin" que consistirá nunha variable que almacene un obxecto coa información a reutilizar. Esa información se poderá utilizar en novos compoñentes especificando os mixin desexados no seu atributo mixins.
directives
Este atributo almacena obxectos que almacena métodos a aplicar a elementos concretos do DOM en unha frase concreta do ciclo de vida do compoñente (hooks). Os elementos que especifiquen v-[metodo] executarán a directiva no hook indicado que pode ser created,beforeMount,mounted,beforeUpdate,updated,beforeUmount e unmounted".
extends
Este atributo permite especificar un compoñente base do que se herdan as funcionalidades. E similar aos mixin, pero indicando un único compoñente.
inheritAttrs
Este atributo booleano controla a herdanza dos atributos. Por defecto os atributos especificados nun compoñente incluído que non son declarados como propiedades, se inclúen como atributos no elemento raíz do template, engadíndose as existentes si é o caso. Especificando false evitamos este comportamento, pero serán accesibles co prefixo "$" Modelo:$attr
emits
Este atributo é un array que conten un conxunto de métodos que "poden ser emitidos" mediante this.$emit. Este evento pode ser capturado co atributo @evento na chamada ao compoñente.
template
Este atributo almacena a plantilla a ser transformada en HTML e incrustada no DOM. Tamén pode indicarse fora do script entre <template> e </template>. A template define o documento a ser incrustado no DOM unha vez procesado coa información producida pola sección <script> e aplicando o estilo especificado na sección <style>. A reactividade garante que si os datos cambian, o template é procesado de novo para xerar unha nova saida.

Composition API

Coa Composition API, definimos a lóxica dun compoñente usando funcións da API importadas. Nos SFCs (Single File Components), a Composition API utilízase normalmente con <script setup>. O atributo setup é unha indicación que permite a Vue realizar transformacións en tempo de compilación que nos permiten usar a Composition API con menos código repetitivo. Por exemplo, as importacións e as variables/funcións de nivel superior declaradas en <script setup> son directamente utilizables na plantilla.

Na maioría dos proxectos de Vue habilitados para ferramentas de construción, autoramos compoñentes de Vue utilizando un formato de ficheiro semellante ao HTML chamado Compoñente de Ficheiro Único (tamén coñecido como ficheiros *.vue, abreviado como SFC). Un SFC de Vue, como suxire o nome, encapsula a lóxica do compoñente (JavaScript), a plantilla (HTML) e os estilos (CSS) nun único ficheiro. 

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>


Ambos os estilos de API son plenamente capaces de cubrir casos de uso comúns. Son interfaces diferentes impulsadas polo mesmo sistema subxacente. De feito, a Options API está implementada sobre a Composition API. Os conceptos fundamentais e o coñecemento sobre Vue son compartidos entre os dous estilos.

Se es novo en Vue, aquí está a nosa recomendación xeral:

Para fins de aprendizaxe, escolla o estilo que lle pareza máis fácil de entender. De novo, a maioría dos conceptos básicos son compartidos entre os dous estilos. Sempre podes aprender o outro estilo máis adiante.

Para uso en produción:

  • Escolla a Options API se non está a usar ferramentas de construción, ou se planea usar Vue principalmente en escenarios de baixa complexidade, por exemplo, mellora progresiva.
  • Escolla a Composition API + Compoñentes de Ficheiro Único se planea construir aplicacións completas con Vue.

Neste documento utilizaremos principalmente Composition API.

Instalación

Existen varios modos de instalación:

Inclusión Direta con <script>

Creación dunha aplicación Vue con Node

Vue proporciona un completo framework baseado en Node.js co que podemos desenvolver unha aplicación, "compilar" as plantillas e conseguir unha versión final de distribución. Para iso se empregan unha serie de utilidades (build tools) que nos axudarán nas distintas fases do proxecto. Unha desas ferramentas é Vite.

Vite é unha ferramenta de desenvolvemento de front-end moderna que se utiliza para a creación de aplicacións web rápidas e eficientes. Foi creada por Evan You, o mesmo creador de Vue.js, aínda que Vite non está limitado só a Vue, xa que tamén soporta outros frameworks como React.

A función de Vite dentro do ecosistema Vue é a "compilación" das plantillas (ES Modules) durante o desenvolvemento e a optimización final para producción.

En primeiro lugar, se debe crear a estrutura da aplicación mediante o uso de xestores de paquetes JavaScript como npm (Node Package Manager) ou yarn (Yet Another Resource Negotiator) entre outros: 

npm create vue@latest

Durante a configuración inicial da aplicación o sistema nos preguntará detalles como:

  • 'o nome do proxecto
  • si imos usar TypeScript
  • si queremos JSX (unha extensión para escribir capas de presentacón dentro do JavaScript para crear interfaces demasiado complexas para as plantillas)
  • si queremos usar Vue-Router (que nos facilita a creación de SPA a través de rutas para a transición entre compoñentes para presentar o contido solicitado ao servidor)
  • si queremos usar Plinia (que nos permite compartir o estado --información-- entre distintos compoñentes da aplicación Vue)
  • si queremos usar Vitest (que é un framework para a realización de tests unitarios )
  • si queremos engadir un sistema de Testing (nos ofrece Cypress, Nightwatch ou Playwrigth)
  • si queremos usar ESLint (analiza problemas de estilo, erros de sintaxe, se xera a configuración para VSCode e podemos utilizalo dende a liña de comandos con npx eslint . ou npx eslint . --fix. Mediante npx podemos executar paquetes instalados con npm sen instalalos no sistema)
  • si queremos usar Prettier (formatea o código revisando tabuladores, espazos.. de xeito que quede lexible)
  • si queremos usar as extensións de depuración de Vue

Unha vez iniciado o proxecto o sistema nos indicará: 

Done. Now run:

  cd "<proxecto>"
  npm install
  npm run dev
  • npm install instalará todos os módulos JavaScript necesarios para Vue
  • npm run dev lanzará unha instancia do servidor web de Node para probar o noso proxecto. Inicialmente so aceptará conexións en localhost. Para cambiar a configuración deste servidor de desenvolvemento debemos modificar o arquivo vite.config.ts:
import { fileURLToPath, URL } from 'node:url'

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
        host: '0.0.0.0', // Escoitar en todas as interfaces
        port: 8000, // O porto no que se esperan conexións
        strictPort: true, // Opcional: fallará si o porto xa está en uso
    },
})

O esquema do proxecto será similar a este: 

<proxecto>/
│
├── index.html            // Archivo HTML principal
├── src/                  // Carpeta de código fuente
│   ├── assets/           // Archivos estáticos (imágenes, etc.)
│   ├── components/       // Componentes de Vue
│   ├── views/            // Vistas de la aplicación
│   ├── App.vue           // Componente raíz
│   └── main.js           // Archivo de entrada de JavaScript
│
├── package.json
└── ...

Co obxectivo de usar rutas correctas a os distintos recursos, se dispón nos compoñentes de Vue do caracter @ para indicar src como raíz. Cando se desenvolva para producción as url se axustarán do xeito necesario. Para crear a aplicación que serviremos mediante un Apache, debemos construila con npm run build e instalar o contido da carpeta build no root do sitio web. Debemos habilitar o módulo rewrite para que funcionen as rutas de Vue.

Unha aplicación básica tería o seguinte aspecto:

  • index.htnl
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hola Mundo con Vue 3</title>

</head>
<body> 
    <div id="app"></div> <!-- Elemento donde se montará la aplicación --> 
    <script type="module" src="/src/main.ts"></script> 
    </script>   
</body>
</html>
  • /src/App.vue
<script setup>
        import Module from '@/components/Module/Module.vue'
        const nombre="Test para Iass Cloud";
</script>

<template>
        <Module msg="You did it!" />
        {{ nombre }}    Hola Mundo!
</template>
  • /src/compoents/Module/Module.vue
<style src="@/components/Module/module.css" scoped></style> <!-- Importar CSS específico del componente -->

<script setup lang="ts">
        defineProps<{msg: string}>()
</script>

<template>
        <h1> {{msg}} It's Work - Has a background icon ?</h1>
</template>

En este contexto, o marcador @ indica nas URL a carpeta /src do proxecto, e se pode usar como inicio de acceso aos recursos dentro de /src

As plantillas en Vue

Vue utiliza unha sintaxe de templates baseada en HTML que che permite ligar de forma declarativa o DOM renderizado cos datos subxacentes da instancia do compoñente. Todos os templates de Vue son sintacticamente HTML válido, que pode ser analizado por navegadores compatibles co estándar e parsers de HTML.

Por debaixo, Vue compila os templates en código JavaScript altamente optimizado. Combinado co sistema de reactividade, Vue pode determinar de maneira intelixente o número mínimo de compoñentes que precisa volver renderizar e aplicar a mínima cantidade de manipulacións no DOM cando cambia o estado da aplicación.

As plantillas Vue se definen nos compoñentes dentro das etiquetas <template>...</template> e dispoñen dunha linguaxe de procesado de plantillas bastante simple e potente que procesará a información procesada na sección <script>:

Interpolación de Texto

A forma máis básica de vinculación de datos é a interpolación de texto utilizando a sintaxe de "mostacho" (dobres chaves): 

<template>
  <span>Message: {{ msg }}</span>
</template>

A etiqueta de mostacho será substituída polo valor da propiedade `msg` da instancia do componente correspondente. Ademais, actualizarase cada vez que a propiedade `msg` cambie.

Vinculación de Atributos

As chaves non se poden usar dentro dos atributos HTML. En vez diso, usa a directiva `v-bind`: 

<template>
  <div v-bind:id="dynamicId"></div>
</template>

A directiva `v-bind` indica a Vue que mantén o atributo id do elemento sincronizado coa propiedade `dynamicId` do compoñente. Se o valor vinculado é `null` ou `undefined`, o atributo será eliminado do elemento renderizado.

Sintaxe Abreviada Como `v-bind` se usa con moita frecuencia, ten unha sintaxe abreviada dedicada: 

<template>
  <div :id="dynamicId"></div>
</template>

HTML Crudo

As dobres chaves interpretan os datos como texto sin formato, non como HTML. Para saír HTML real, necesitas usar a directiva `v-html`: 

<template>
  <p>Usando interpolación de texto: {{ rawHtml }}</p>
  <p>Usando a directiva v-html: <span v-html="rawHtml"></span></p>
</template>

Atributos Booleanos

Os atributos booleanos son atributos que poden indicar valores verdadeiros/falsos pola súa presenza nun elemento. Por exemplo, `disabled` é un dos atributos booleanos máis comúns.

`v-bind` funciona dun xeito algo diferente neste caso: 

<template>
  <button :disabled="isButtonDisabled">Button</button>
</template>

O atributo `disabled` incluirase se `isButtonDisabled` ten un valor verdadeiro. Tamén se incluirá se o valor é unha cadea de texto vacía, mantendo a coherencia con `<button disabled="">`. Para outros valores falsos, o atributo será omxido.

Vinculación dinámica de múltiples atributos

Se tes un obxecto de JavaScript que representa múltiples atributos e que ten a seguinte estrutura: 

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

Podes vinculalos a un único elemento utilizando `v-bind` sen un argumento: 

<div v-bind="objectOfAttrs"></div>

Usando expresións de JavaScript

Até agora, só vinculamos claves de propiedades sinxelas nas nosas plantillas. Pero Vue realmente admite toda a potencia das expresións de JavaScript dentro de todas as vinculaciones de datos: 

{{ number + 1 }}

{{ ok ? 'SÍ' : 'NON' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>


Estas expresións serán avaliadas como JavaScript no ámbito de datos da actual instancia do componente.

Nas plantillas de Vue, as expresións de JavaScript pódense usar nas seguintes posicións:

- Dentro das interpolacións de texto (mustaches)
- No valor dos atributos de calquera directiva de Vue (atributos especiais que comezan con `v-`)

Chamando funcións

É posible chamar a un método exposto por un componente dentro dunha expresión de vinculación: 

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

As funcións chamadas dentro das expresións de vinculación serán executadas cada vez que o componente se actualice, polo que non deben ter efectos secundarios, como cambiar datos ou acender operacións asincrónicas.
As expresións de plantilla están illadas e só teñen acceso a unha lista restrinxida de globais. A lista expón globais incorporados de uso común como Math e Date.

Os globais

que non están incluídos na lista de forma explícita, como as propiedades engadidas polo usuario a window, non serán accesibles nas expresións de plantilla. Con todo, pódese definir explícitamente globais adicionais para todas as expresións de Vue engadíndoas a app.config.globalProperties.

Directivas

As directivas son atributos especiais co prefijo `v-`. Vue proporciona unha serie de directivas incorporadas, incluíndo `v-html` e `v-bind.

Os valores dos atributos das directivas esperan ser expresións de JavaScript únicas (con excepción de `v-for`, `v-on` e `v-slot`). O traballo dunha directiva é aplicar actualizacións de forma reactiva no DOM cando o valor da súa expresión cambia. Tomemos como exemplo `v-if`: 

<p v-if="seen">Agora me ves</p>

Neste caso, a directiva `v-if` eliminaría ou inseriría o elemento `

` en función da veracidade do valor da expresión `seen`. Outras directivas son:

  • v-on
  • v-for
  • v-slot
Traído desde «http://web.iesrodeira.com/mediawiki/index.php?title=Vue_3&oldid=3371»