Este vídeo corresponde a la versión vieja del script. |
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.
Para crear un proyecto Vue seguiremos los siguientes pasos (omitiendo los de instalar requisitos previos si ya los tenemos):
Lo primero que necesitamos tener instalado es Node.js, que trae el gestor de paquetes npm, y lo podemos descargar aquí: https://nodejs.org/es/. 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.
Una vez instalado, tenemos que instalar Vue CLI, que nos proporciona unos comandos para la creación y prototipado de proyectos de forma simple y rápida. Para instalarlo abrimos una terminal de comandos y ejecutamos lo siguiente:
npm install -g @vue/cli |
Una vez hecho esto, tenemos dos opciones, un script que sirve de arquetipo para aplicaciones FundewebJS, o la forma nativa.
Ejecutamos:
crearProyecto.bat |
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 en la raíz del proyecto. 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 backend.
Importante: cuando probemos nuestra aplicación en local, tendremos que usar nuestro dominio .atica.um.es, pues a través de localhost no nos dejará hacer login con el portal.
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):
vue create nombreproyecto |
A continuación, podremos elegir la configuración por defecto, o seleccionar los componentes y configuración manualmente. Si lo hacemos de forma manual, dispondremos de elementos como vuex o router, y se nos generarán directamente los archivos necesarios. También podremos guardar como presets las configuraciones manuales que hagamos, por si queremos reutilizarlas.
Una vez terminada la creación del proyecto, lo podremos abrir en VS Code desde File → Open Folder y seleccionando la carpeta generada.
La estructura de nuestros proyectos Vue vendrá marcada por unos directorios comunes de forma que el código quede organizado de forma similar en todos los proyectos FundeWebJs. El código lo tendremos bajo la carpeta :
Además, en la raíz del proyecto, tendremos:
Hacemos una diferenciación entre lo que serán vistas y lo que serán componentes para mantener cierta organización y que no acabemos con una carpeta poco intuitiva que contenga demasiados archivos. En ambos casos serán componentes, archivos .vue, pero las vistas serán los componentes que contengan una pantalla completa, mientras que los componentes son partes de éstas, por ejemplo una tabla, o cierta sección que queramos mostrar en nuestra pantalla, o una parte reutilizable que se utilice en diferentes vistas.
La aplicación se inicia en main.js, donde se crea la instancia de Vue. El componente inicial, el que será el padre de todos los componentes, será App.vue. En éste, generalmente tendremos las partes fijas de la aplicación, como el header, footer, o menú. Para el contenido de la página, con <router-view> se le indica que se cargue el componente (que será una vista, es decir, un componente del directorio Views) correspondiente a la ruta en la que nos encontremos. Las diferentes rutas tendremos que definirlas en src/router/index.js. Un ejemplo de App.vue podría ser este, que incluye el header del portal de servicios y el elemento <router-view>:
<template>
<div id="app">
<div style="height: 56px;">
<fwjsHeader :title="$t('titulo')" :isLogged="true" style="z-index: 9"/>
</div>
<div id="contenido" style="margin-top: 15px">
<router-view></router-view>
</div>
</div>
</template>
<script>
import fwjsHeader from "@mncs/fwjs-components/fwjsHeader";
export default {
components: {
fwjsHeader,
},
};
</script>
|
Aquí vemos que se utiliza el header del paquete @mncs/fwjs-components, que es un paquete propio. Este se encuentra en Verdaccio, que es el repositorio propio de componentes que tenemos. Tenemos una página de documentación dedicada a cómo subir y descargar componentes: Documentación Verdaccio.
De forma resumida, para este caso, debemos tener el archivo .npmrc en la raíz del proyecto, que ya lo tendremos si hemos utilizado el script de creación, que contenga:
registry = https://verdaccio.um.es/ |
Y ejecutar este comando en la terminal de VS Code:
npm install --save @mncs/fwjs-components |