...

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. Para  (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.

Ahora, mientras los plugins de Spring Boot no estén empaquetados junto a FundeWeb 2.1, tendremos que añadirlos manualmente. Para ello, tendremos que seguir el siguiente proceso:

• Descargamos Spring Tools de https://spring.io/tools. Seleccionamos la opción Spring Tools 4 for Eclipse → Windows 64 bits. Se nos descargará un archivo .jar que tendremos que ejecutar de la misma manera que el instalador de FundeWeb. Tendremos otro Eclipse instalado en la misma carpeta que contiene el .jar, en un directorio cuyo nombre será algo como sts-4.6.2.RELEASE, pudiendo cambiar la versión.

• Dentro de ese directorio, iniciamos el Eclipse instalado ejecutando SpringToolSuite4.exe.

• Una vez abierto, nos vamos a File → Export → Install → Installed Software Items to File:

Image Removed

• Seleccionamos todo, indicamos nombre y localización del archivo que se generará, y marcamos que incluya las entradas no encontradas en repositorios:

Image Removed

• Una vez finalizado el proceso podemos cerrar el Eclipse de Spring.

• Abrimos FundeWeb 2.1 y nos vamos a File → Import → Install → Install Software Items from File:

Image Removed

• En la siguiente ventana, con Browse seleccionamos el archivo que hemos generado previamente. Pulsamos en Select All y marcamos los dos ticks, de modo que quede así:

Image Removed

• A continuación, dejamos marcada la primera de las tres opciones disponibles y continuamos:

Image Removed

• En las siguientes pantallas pulsamos Next, aceptamos los términos, y Finish.

• Durante la instalación, nos saltará un warning, y tendremos que clickar en Install anyway. Cuando termine la instalación, nos pedirá que reiniciemos Eclipse, tras lo cual ya tendremos instalado todo lo necesario para trabajar con Spring Boot.

Instalación del front-end

En primer lugar, tendremos que instalar npm y Vue:

Instalación del front-end

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 adicionalNPM: descargar de aquí e instalar.

• 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

...

.