Para FundeWebJS se utilizarán dos IDEs separados. Para el back-end (Java - Spring Boot) utilizaremos el Eclipse de FundeWeb 2.1, mientras que para el front-end (Vue) se usará Visual Studio Code. Esto se debe a que, actualmente, Eclipse no tiene las herramientas y plugins necesarios para trabajar con Vue.
En primer lugar, habrá que instalar FundeWeb 2.1. Podremos descargar su instalador desde el siguiente enlace: Instalador FundeWeb - latest (si no funciona la descarga hacer click derecho → Guardar enlace como...). Para ejecutar el .jar que se nos descarga, tendremos que hacerlo como administrador. Para ello:
Nos abrimos una terminal de comandos como administrador: Menú de Windows → Buscamos “cmd” → Click derecho en “Símbolo del sistema” → Ejecutar como administrador
Nos situamos en el directorio que contiene el instalador: cd C:\Users\nombre.usuario\Downloads
Lo ejecutamos con java -jar “FwdInstalador-latest.jar”
En el instalador, seleccionamos la primera opción (Instalación), y sólo tendremos que ir avanzando y aceptando.
En primer lugar, tendremos que instalar npm y Vue:
Node.js: descargar de aquí e instalar. Debemos instalar la versión LTS (a día de hoy, 05/10/22, es la v14), pues con la última versión puede saltar un error "vue no se reconoce como un comando interno o externo", y esto no sucede con la LTS. Es posible que para que nos deje instalarlo, tengamos que desactivar el antivirus Avast y reiniciar. Además, para instalarlo, en las diferentes pantallas en las que tenemos que avanzar, nos ofrece en un checkbox la posibilidad de incluir software opcional (como Chocolatey), este tick no es necesario marcarlo, no hace falta instalar ese software adicional.
Vue: en una terminal ejecutamos npm install -g @vue/cli.
Para programar la parte de Vue, el front-end, se utilizará Visual Studio Code con una serie de extensiones. Para ello, en la barra lateral de VS Code tendremos un símbolo con cuatro cuadrados, con el que accederemos a la sección de las extensiones, donde podremos buscarlas e instalarlas. En concreto, utilizaremos estas extensiones:
Auto Rename Tag
Id: formulahendry.auto-rename-tag
Autor: Jun Han
Esta última nos cambiará algunos atajos de teclado a los de Eclipse, por ejemplo, Ctrl + Mayus + F para formatear el código. Es opcional, pero si estamos acostumbrados a Eclipse será útil.
Por último, tenemos que modificar la configuración del editor, modificando directamente settings.json. Para acceder a este archivo, pulsaremos Ctrl + Mayus + P y escribiremos "abrir configuración". Nos dará varias opciones, seleccionamos "Preferencias: Abrir Configuración (JSON)":
Esto nos abrirá el archivo, y dentro del primer bloque de llaves { } pegaremos el siguiente snippet:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
]
|
Con esto ya tendríamos la configuración de VS Code completa.