...

Explicación en vídeo

El script de creación ha cambiado desde que se grabó este vídeo, pero la forma de ejecutarlo es la misma. El proceso con el nuevo script se describe en los apartados siguientes.

...

1. En primer lugar, debemos descargar este archivo: crearProyectoFDWJS.rar. Descomprimimos la carpeta que contiene.
2. Nos abrimos una terminal y nos situamos dentro de la carpeta que hemos extraído.

3. Ejecutamos:

   Bloque de código
   crearProyecto.bat

   
   

4. Nos pedirá que introduzcamos lo siguiente: nombre del proyecto (será el nombre de la carpeta que contenga el proyecto), ruta base (ruta en la que se desplegará nuestro frontend, por ejemplo "/consulta/expedienteacademico") y ruta del backend (coincidirá con la propiedad server.servlet.context-path que tengamos en el application.properties de nuestro proyecto , y el resto del proceso se ejecuta automáticamente.Spring Boot). Con estas últimas dos se establecen dos variables de entorno necesarias (archivo.env), que se podrán cambiar sin problema.
5. Por último, debemos cambiar el campo "name" del archivo package.json e indicar el nombre de nuestro proyecto (el nombre sigue unas convenciones, básicamente debe estar formado por letras minúsculas y guiones, por ejemplo "consultaexpedientes-ui".
6. Ejecutar npm i para descargar las dependencias de nuestro proyecto.

Una vez hecho esto, ya podemos iniciar nuestro proyecto, pero para que funcione correctamente en local, hay que tener dos variables de entorno que colocaremos en un archivo .env.local. Estas variables son:

• VUE_APP_API_ENVIRONMENT=https://micampusdesa.um.es

• VUE_APP_BACKEND=https://mipc.atica.um.es:8080 (indicar la ruta correspondiente en nuestro equipo)

La primera de ellas será micampusdesa, pues se utilizará para proxyficar las llamadas al portal, por ejemplo para poder hacer login. La segunda será la ruta completa de nuestro backendCon esto, tendremos el proyecto creado en el mismo directorio que el script, tendremos que moverlo si queremos.

Forma nativa

Desde una terminal, nos situamos en el directorio en el que queramos generar el proyecto (nos podemos mover por los directorios con el comando cd) y ejecutamos el siguiente comando (el nombre que le demos al proyecto debe ser todo en minúsculas):

...

• /src/assets: contendrá archivos que necesite nuestro proyecto, imágenes por ejemplo, y también el estilo corporativo mientras no esté disponible como un paquete de npm (guía de estilo corporativo).
• /src/components: componentes Vue propios.
• /src/locales: archivos de internacionalización (documentación de internacionalización).
• /src/mixins: mixins, archivos js para añadir funcionalidad a los componentes. Por ejemplo, aquí tendremos el mixin AuthRefresher para refrescar el token del usuario logeado.
• /src/router: contendrá un index.js con el router donde vendrán definidas las rutas de nuestra aplicación (documentación vue-router).
• /src/services: archivos js correspondientes a las llamadas a nuestros servicios REST (documentación de llamadas a servicios REST).
• /src/store: store de Vuex y sus módulos (documentación Vuex).
• /src/views: componentes que sean vistas, generalmente tendremos uno por ruta.
• /src/App.vue: componente inicial de la aplicación.
• /src/main.js: archivo js donde hacemos imports globales e inicializamos la instancia de Vue.
• /src/i18n.js: inicializa la internacionalización de nuestra aplicación.

Además, en la raíz del proyecto, tendremos:

...