...

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.

Instalación del back-end

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.

Instalación del front-end

En primer lugar, tendremos que instalar npm y Vue:

• Node.js: descargar de aquí e instalar. Debemos instalar , cualquiera de las dos versiones que nos ofrece nos valdrá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 el README del proyecto Portal UI (https://

...

gitlab.com/umugit/atica/desarrollo/aulavirtual/

...

Para importar las extensiones, primero habrá que descargar este pack: FundeWebJS Vue Extension Pack

...

Ahora, dentro de Visual Studio Code, nos vamos a la pestaña de extensiones (barra lateral izquierda, icono con cuadrados), pulsamos en los tres puntitos de arriba y seleccionamos Install from VSIX…:

portal-ui) aparecen las siguientes extensiones a instalar:

• Alphabetical Sorter
  Id: ue.alphabetical-sorter
  Autor: Ugur Erdal

• Auto Rename Tag
  Id: formulahendry.auto-rename-tag
  Autor: Jun Han

• Bracket Pair Colorizer
  Id: coenraads.bracket-pair-colorizer
  Autor: CoenraadS
• Beautify
  Id: hookyqr.beautify,
  Autor: HookyQR
• EditorConfig for VS Code
  Id: editorconfig.editorconfig
  Autor: EditorConfig
• ESLint
  Id: dbaeumer.vscode-eslint
  Autor: Microsoft
• Import Cost
  Id: wix.vscode-import-cost
  Autor: Wix
• Vue Language Features (Volar)
  Id: johnsoncodehk.volar
  Autor: Johnson Chu

Podemos instalar otras extensiones si nos son útiles, estas son las básicas que debemos tener en común.

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)":

Image Added

Esto nos abrirá el archivo, y dentro del primer bloque de llaves { } pegaremos el siguiente snippet:

"eslint.autoFixOnSave": true,
"eslint.lintTask.enable": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.validate": [
  {
    "language": "vue",
    "autoFix": true
  },
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "javascript",
    "autoFix": true
  }
]

Por último, si tenemos el IDE en inglés y queremos cambiar a idioma español, seguiremos estos pasos:

1. Abre Visual Studio Code
2. Pulsa Ctrl + Shift + P
3. Escribe en la barra de búsqueda: Configure Display Language.
4. Haz clic sobre Install Aditional Languages.
5. Selecciona el pack de idioma que te interese de la lista de la izquierda. En este caso Spanish.
6. Haz clic en Install.
7. Haz clic en Restart Now.

Con esto ya tendríamos la configuración de VS Code completa

Image Removed

...

.