1. VUE. Conceptos Básicos e preparación do entorno de desenvolvemento

Conceptos Básicos e preparación do entorno de desenvolvemento en VUE (2 horas)

Neste módulo, imos introducirnos nos conceptos fundamentais de Vue.js, a estrutura básica dun proxecto baseado en Vue. Tamén aprenderás a configurar o entorno de desenvolvemento necesario, instalando Node.js, utilizando o Vue CLI e configurando o editor de código adecuado para comezar a programar en Vue. Todo isto servirá como base para o proxecto que iremos desenvolvendo ao longo do curso.

Os obxectivos da unidade son:

• Comprender os conceptos fundamentais de Vue.js e o seu enfoque baseado en compoñentes e reactividade.
• Analizar a estrutura básica dun proxecto creado con Vite e Vue 3.
• Configurar correctamente o entorno de desenvolvemento en Visual Studio Code con extensións útiles.
• Crear e executar o primeiro proxecto funcional en Vue, comprendendo o papel dos ficheiros principais (App.vue, main.js, HelloWorld.vue).

Conceptos Básicos

• Creado por Evan You, ex-empregado de Google onde traballaba con Angular.
• Framework progresivo, para construír interfaces de usuario en contornas Web.
• Facilita a creación de aplicacións reactivas, e baseadas en compoñentes.
• As aplicacións Web son preferentemente do tipo SPA (Single Page Application).
• Vue.js inspírase o patrón Modelo-Vista-ViewModel (MVVMA) separando a lóxica da interface de usuario (vista) da lóxica da aplicación (modelo e view-model).
• Escalable, a partires da integración de novos compoñentes según a necesidade da aplicación.
• Lixeiro, e con unha curva de aprendizaxe suave.

Vantaxes:

• Excelente documentación e curva de aprendizaxe suave.
• Reactividade automática dos datos.
• Flexibilidade para proxectos pequenos e complexos
• Rendemento na execución da aplicación

Inconvintes:

• Comunidade más pequena que React ou Angular.
• Ecosistema menos maduro, aínda que sólido.
• En proxectos grandes pode precisar complementos adicionais.
• Cantidade de plugins menor fronte a React ou Angular.

Conceptos básicos a ter en conta:

• Aplicacións reactivas: actualizan automaticamente a súa interface de usuario cando cambian os datos subxacentes, sen que o usuario teña que refrescar a páxina ou facer accións adicionais.
• SPA: só se carga unha vez a páxina HTML, e despois o contido cambia dinamicamente sen recargar a web.

Ambos conceptos están interrelacionados.

Por qué ensinar/aprender Vue?

React domina de momento no mercado de frameworks no lado do frontend, especialmente en empresas grandes; pero vue é interesante polo seu enfoque didáctico xa que destaca:

• pola súa sintaxe máis clara
• pola separación natural entre template, lóxica e estilos.

Isto facilita que o alumnado comprenda desde o inicio como se estrutura unha aplicación frontend moderna.

Iniciarse directamente co React pode xerar certa frustración porque introduce demasiadas conceptos á vez:

• funcións que son compoñentes
• un elevado nivel de abstracción inicial
• estados inmutables
• mezcla HTML dentro de JS
• ...

Esta complexidade adoita levar a que o alumnado memorice patróns sen chegar a razonalos, ao non existir unha estrutura clara onde distinguir que parte corresponde á vista, á lóxica ou ao estado.

Todo esto evítase con Vue. O alumno traballa cunha estrutura clara dun proxecto dende o principio: "aquí vai o que se ve, aquí o que fai e eiquí como se ve". Isto permite consolidar conceptos fundamentais do frontend co que o salto a React é moi máis doado.

En canto ao mercado laboral:

• React domina arredor de dous terzos das ofertas
• o terzo restante repártese principalmente entre Angular e Vue.

Porén Vue:

• non substitúe React na formación
• actúa como unha base sólida
• facilita a aprendizaxe posterior doutros frameworks máis complexos.
• e está a crecer especialmente en pequenas empresas e startups fortalecendo o seu ecosistema.

Estrutura básica dun proxecto VUE

Una vez iniciado un proxecto Vue, a estrutura xeral do mesmo é a que se mostra a continuación.

Dita estrutura non é fixa e exactamente igual a da imaxe:

• pode variar en función das necesidades e evolución do proxecto

• non son necesarias todas nun proxecto pequeno:
• podemos necesitar engadir directorios ou arquivos nos grandes

• por exemplo

• se temos nunha aplicación con CRUD, o habitual e engadir arquivos de consultas, actualizacións... nun arquivo js.
• e se son moitos, clientes.js, produtos.js..., gardalos nun directorio, xeralmente chamado api.

Que é un compoñente?

É unha unidade independente e reutilizable da interface de usuario o que facilita o seu mantemento.

Encapsula, repectivamente, HTML, JavaScripte e CSS para que traballen xuntos.

• O QUE SE VE
• O QUE FAI
• COMO SE VE

Poden comunicarse con outros a través de:

• props (recibir datos)
• eventos (enviar datos de volta).

Ten tres partes: template, script (setup) e style (scope).

Un aspecto importante nas últimas versión de Vue foi a inclusión no script do termo setup.

En Vue 2, a lóxica dun compoñente estaba espallada:

• data
• methods
• computed
• watch
• mounted

Funcionaba ben pero cando o proxecto crecía o mantemento facíase complicado.

Con Vue 3, setup() é o punto de entrada da lóxica dun compoñente. Ademais, evitase o uso de claves como export default, returns, que aínda que funcionaba ben, pero cando o proxecto escalaba o mantemento facíase complicado e confuso.

Setup é o primeiro que se executa antes de que o compoñente se mostre e onde se define todo o estado reactivo e a lóxica. Todo o que declares no setup() (ou uses con script setup) está dispoñible no template.

En resumo:

• unifica toda a lóxica

• non teremos datos por un lado, métodos por outro e computed noutro
• agora temos todo xunto, o que facilita a reusabilidade das funcións

• todo está máis organizado por funcionalidade
• existe unha maior lexiblidade (o máis importante!).

Preparación da contorna de desenvolvemento

Imos a establecer previamente unha serie de consideracións:

• Sistema Operativo será Ubuntu 24.04 ou ben Windows 11, non hai diferenzas substanciais, agás o case-sensitive de Linux as maiúsculas e minúsculas e, moi rara vez, a versión de algunha librería. Irei saltando alternativamente entre os dous para que vexades que non hai problema.
• A contorna de Desenvolvemento será Visual Studio Code incluíndo algunhas extensións que se indicarán para facilitar a codificación do código.
• Usaremos a aprendizaxe baseada en proxectos. A partires dun sinxelo suposto práctico iremos engadindo funcionalidades no mesmo.
• Este curso é unha introdución ao framework onde veremos, ademais da sintaxe e módulos básicos dun compoñente, o enrutamento e operacións CRUD sinxelas. Nun curso máis avanzado quedarían, principalmente, temas como a autenticación, uso de librerías avanzadas como sistemas de pago ou o build da aplicación, entre outros.
• O obxectivo é que ao rematar teñamos un pequeno proxecto funcional e os coñecementos necesarios para seguir avanzando.

Paso 1. Instalación de Visual Code e as extensións máis usada.

En Windows

En Windows descárgase o paquete e instálase.

Tamén podemos usar o Microsoft Store.

VS Code no Microsoft Store

En Ubuntu

Podemos facelo dende a liña de comandos:

$ sudo apt update && sudo apt upgrade -y
$ sudo apt install software-properties-common apt-transport-https wget -y
$ wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add –
$ sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/code stable main"
$ sudo apt update && sudo apt install code –y
$ code --version (verifica a versión)

Ou ben dende a APP de Ubuntu e non nos complicamos.

VS Code instalado desde Ubuntu

Paso 2. Instalación das extensións máis utilizadas en VS Code para a codificación con VUE.

Extensións axeitadas para uso con Vue

Aínda que non son estritamente necesarias, facilitan a codificación traballando algunhas delas de forma transparente ao usuario.

Dado por feito que sabemos instalar extensións en VSCode o resultado final quedaría así. Senón podemos consultar como instalar extensións na web da documentación oficial.

Vue Language Features (Volar). ID Vue.volar ESLint

Reemplaza a Vetur (eliminar se aparece) en Vue 3. Autocompletado, resaltado de sintaxes, IntelliSense

ESLint. ID dbaeumer.vscode-eslint

. Mantén o código consistente e libre de erros comúns con ESLint. Require configurar o arquivo .eslintrc no proxecto.

Prettier - Code formatter. ID esbenp.prettier-vscode.

Formatea automáticamente o código cun estilo unificado. Usalo como formateador por defecto.

npm Intellisense. ID christian-kohler.npm-intellisense

Autocompletado moi útil para imports de módulos instalados vía npm.

Path Intellisense. ID christian-kohler.path-intellisense

Autocompletado para rutas de arquivos, evita problemas. Complementa a anterior.

TypeScript Vue Plugin (Volar) (opcional se se usa TS). ID Vue.vscode-typescript-vue-plugin

Mellora soporte de TypeScript en Vue.

Tamén podemos engadir:

Live Server (Ritwick Dey)

se se quere mostrar exemplos rápidos de HTML/JS fora de Vue. Mellor evitalo xa que en proxectos máis complexos non rende e é mellor utilizar os navegadores.

Paso 3. Creamos o proxecto Vue

Dividirémolo en tres etapas.

3.1. Terminal de comandos de VS Code

Situámonos no terminal de comandos de Visual Code, no directorio que consideres oportuno.

Cando creamos o proxecto vue, o framework creará o directorio do mesmo onde estarán todos os arquivos necesarios

Terminal ➔ New Terminal

3.2. Instalación de Node.js

Agora temos que instalar Node.js: npm ou node package manager ou ben nvm ou node versión manager (recomendado para Linux).

En Windows

En Windows, descarga dende a web de Node.js.

Non descarga nvm, só npm. Para o proxecto básico é suficiente. En proxectos máis grandes, proxectos en equipo ou proxectos que quedaron desactualizados si é necesario.

Nota. Se non tes permisos de admin, podes descar o ficheiro zip con node, descomprimir, e fixar a ruta no path
set PATH=%PATH%;C:\Program Files\nodejs\

En Linux

En Linux temos dúas opcións:

npm

esta ben para empezer pero non instala o máis recente e pode afectar algún paquete.

$ sudo apt update 
$ sudo apt install nodejs npm -y

nvm (Node version manager)

a instalación e algo máis complexa pero instala a versión máis recente e facilita moito o control das versións dos paquetes. En Linux é a recomendada.

Os pasos son instalar curl (en caso de que non o teñas xa por defecto), descargar script de nvm lanzando a execución do script, e recargar a configuración

$ sudo apt install curl 
$ curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | sh
$ source ∼/.bashrc

E procedemos a instalación da última versión –LTS de Node.js e comprobamos as versións.

$ nvm install –lts 
$ nvm use --lts

• 

  Unha vez instalado curl o empregamos parada descargar e executar script

• 

  Recarga da configuración

• 

  Instalación da última versión estable (LTS)

• 

  Configuración de uso da última versión estable (LTS)

Crear o proxecto

Finalmente tanto en Linux como en Windows, creaamos un proxecto Vue.

Dende o terminal de Visual Code, no directorio que consideres oportuno, e no meu caso o proxecto chámase proxectovue.

En Linux:

$ npm create vite@latest proxectovue --template vue  

En Windows:

C:/users> npm create vite@latest proxectovue --template vue

• 

  Creamos o proxecto. Escollemos Vue como framework

• 

  Creamos o proxecto. Escollemos Javascript como variant

• 

  O proxecto queda arrincado

Pode suceder que nos indique que framework queremos usar, eleximos Vue.

Logo eliximos JS como variant, e contestamos que non a versión beta de Vite, aínda non estable.

NOTA-
A versión beta de Vite conten como melloras:
* un novo rolldown,que mellora as compilación de produccións, sendo máis rápidas
* unifica certas ferramentas que se usan tanto en dev como en producción
* certas opcións avanzadas de Typescript

Algunhas consideracións adicionais sobre as imaxes anteriores:

Comando / Acción	Descrición
proxectovue	O xestor de paquetes crea a carpeta do proxecto.
--latest	Usará a versión máis recente de Vite.
--template	Usará a plantilla básica de Vue.
cd proxectovue	Entramos na carpeta do proxecto.
npm install e npm update	Instalamos dependencias e/ou actualizamos.
npm run dev	Lanzamos o proxecto.

Outra mellora é que, se nos fixamos, tras a instalación o framework arrinca automaticamente. No seguinte paso poderemos ver como arrincalo tamén en futuras ocasións.

Tamén pode presentar algúns warnings como é a actualización de npm indicando a forma de facelo. Neste curso de introdución pódese omitir.

Instalación de dependencias e lanzamento do proxecto

Imos finalizar a instalación cos pasos que se indican, entrando no directorio do proxecto, instalando as dependencias e lanzando o proxecto.

Unha vez temos o proxecto en marcha queda falar de dous comando habituais que son npm install e npm update.

• npm install: instala ou verifica as dependencias segundo o que está especificado no package.json. Se non están instaladas, instalará; se xa están, asegúrase de que están correctas.
• npm update: actualiza as dependencias que xa están instaladas ás versións máis recentes que coincidan coas restricións de versión no package.json.

• Por exemplo, se no package.json pon que o paquete lodash debe ser ^4.17.0, npm update só actualizará a versión a algo dentro da gama 4.x.x, pero non á versión 5.x.x. Se non tén ^ entón non se actualiza.

O ficheiro package.json contén información sobre o proxecto, as dependencias que utiliza e como debe executarse ou compilarse.

Ficheir package.json

Só temos que cliquear na ligazón http://localhost:5173 e no navegador apareceranos a páxina inicial.

Revisión da práctica

Por outra banda, se abrimos Open Folder en Visual Code aparécemos algo que nos resulta familiar que é a estrutura básica dun proxecto Vue que xa analizamos anteriormente.

Estrutura básica do proxecto

• En desenvolvemento pódese seguir esta distribución
• En produción separamos o backend do frontend

Análise de HelloWorld.vue

Imos analizar arquivo HelloWorld.vue.

HelloWorld.vue

En primeiro lugar o nome:

• formado por dúas palabras (o unha sola cunha maíscula no medio)

• iniciadas en maiúscula (notación PascalCase)
• ou ben separadas por un guión hello-word.vue (notación kebab-case).

Usarase neste caso a primeira opción.

Estrutura do compoñenente

Estrutura de cartafoles

En segundo lugar, analicemos a estrutura básica dun compoñente. Se vos aparece antes a zona de script ca de template non hai problema.

Por preferencia personal usaremos a orde tradicional. E dicir:

template => script => style

A vantaxe da últimas versións de Vue e a inclusión de termo setup na declaración de scripts, que ten as seguintes vantaxes:

• código máis corto e claro, mellorando a lexibilidade
• importacións automáticas e máis rendemento (Vue compila máis rápido) mellorando o rendemento.
• non precisas usar export default que pasa a api, nin returns, e o mellor tampouco this, que as veces da máis problemas que solucións.
• o uso de elementos ref, reactive, computed, watch, onMounted... entre outros, faise cunha sintaxes moito máis limpa e directa.

En resumo, todo o código está automaticamente dispoñible no template cando se carga o compoñente.

Agora, botemos unha ollada ao compoñente App.vue ou compoñente raíz, e pai do resto dos compoñentes.

O primeiro que chama a atención é que esta situado fora do directorio components. Esto é debido a dúas razóns básicas:

• é o punto de entrada visual onde se monta toda a app.
• está directamente conectado con main.js ou main.ts, que o monta dentro do index.html.

Normalmente contén aspectos como o router-view, ou chamadas aos compoñentes cabeceira, pé, menú e outros elementos principais para non ter que chamalos cada vez que se carga un compoñente. Esto fai que o desenvolvemento da aplicación gañe en productividade.

O funcionamento é básicamente o seguinte:

1. index.html, o primeiro que se lanza nunha web
2. carga main.js
3. e este chama App.vue

Funcionamento

Vite

Unha última consideración, no navegador vemos o termo Vite+Vue, pero Vite non é algo exclusivo dun framework, neste caso de Vue.

Vite:

• é unha ferramenta de desenvolvemento frontend pensada para traballar con aplicacións web actuais dun xeito moi rápido e eficiente
• é o motor que se usa para crear, executar e construír proxectos web modernos, especialmente con frameworks coma Vue, React ou Svelte.
• encárgase de:

• Crear a estrutura inicial do proxecto
• Arrancar un servidor de desenvolvemento
• Recargar a aplicación ao instante cando hai cambios (Hot Module Replacement) e cargando só o código que precisa e como usa ES Modules nativos do navegador faina moi rápida.
• Xerar a versión final optimizada para produción
• Traballa con Vue 3, React, Vanilla, Svelte,....

Resumo

Nesta primeira unidade aprendemos a:

• Comprender que é Vue.js, un framework progresivo e lixeiro para crear aplicacións reactivas baseadas en compoñentes.
• Entender o concepto de aplicación reactiva e SPA (Single Page Application).
• Coñecer a estrutura básica dun proxecto Vue xerado con Vite.
• Diferenciar as tres partes dun compoñente:

• template
• script (setup)
• style.

• Instalar a contorna de desenvolvemento completa:

• VS Code e as súas extensións máis útiles (Volar, ESLint, Prettier...).
• Como instalar Node.js e npm/nvm.

• Creación dun proxecto: npm create vite@latest nomeproxeto --template vue
• Analizar o funcionamento de compoñentes básicos como HelloWorld.vue e App.vue, e entender o seu papel na aplicación.
• Coñecer as vantaxes do novo script setup, que simplifica a sintaxe e mellora o rendemento.

Referencias

• Introdución ao desenvolvemento de aplicacións web con Vue.js impartido polo profesor Juan Carlos Pérez González baixo licenza Atribución-Non comercial-Compartir igual 4.0 Internacional
• VUE QuickStart