Vue 3 ComponentsLibrary

Estructura del proyecto

Este proyecto permite compilar componentes de Vue3 + Vite+ Composición + Typescript + Bootstrap 5 para ser compartidos por medio de NPM entre proyectos.

En el directorio sandbox se encuentra un proyecto Vue 3 convencional donde se pueden testear y previsualizar en tiempo real los componentes que se esten desarrollando.

En el directorio scss se encuentran todos los archivos de estilos de cada componente en donde sea necesario modificar los estilos de Bootstrap 5.

En el directorio src se encuentran todos los componentes organizados en directorios.

Pre-requisitos

El componente uploader de archivos requiere que el endpoint en PHP tenga habilitada la extensión:

extension=php_fileinfo.dll

Es necesario tener instalado

• Node Js LTS La versión utilizada para el primer desarrollo fue 18.13.0 LTS.

• yarn

  npm install -g yarn

Recomendaciones opcionales para instalar

• Visual Studio Code
• Vue Language Features (Volar) - Extensión para Visual Studio Code.
• TypeScript Vue Plugin (Volar) - Extensión para Visual Studio Code.
• CMDER es una consola de comandos sencilla que interpreta los comandos de linux en windows.

Instalación

Clonar el proyecto desde git, con el comando en cualquier directorio de Windows:

    git clone https://gitlab.hcdiputados-ba.gov.ar/desarrollo/librerias/vue3-components-library.git .

Posteriormente realizar un:

    yarn install

Compilación desarrollo

El comando dev compila el proyecto y crea un servidor local con hot reload para trabajar en tiempo real.

    yarn dev

Compilación productiva y publicación en NPM

Compilación producción

El comando build compila el proyecto comprimido para luego poder ser distribuido.

    yarn build

Si el comando anterior falla con errores de FilePond se debe realizar los siguientes pasos:

1. Comentar el contenido del archivo node_modules\vue-filepond\types\index.d.ts y agregar la linea:

    declare module 'vue-filepond';

2. Comentar el contenido del archivo node_modules\filepond-plugin-file-validate-type\types\index.d.ts y agregar la linea:

    declare module 'filepond-plugin-file-validate-type';

3. Comentar el contenido del archivo node_modules\filepond-plugin-image-preview\types\index.d.ts y agregar la linea:

    declare module 'filepond-plugin-image-preview';

4. Comentar el contenido del archivo node_modules\filepond-plugin-file-validate-size\types\index.d.ts y agregar la linea:

    declare module 'filepond-plugin-file-validate-size';

Publicación NPM PRODUCCIÓN

Posteriormente para poder publicar la librería en NPM se debe:

1. Tener un usuario personal registrado en NPM. Ir al registro...

2. Acceder a la cuenta de NPM de la HDC desde el navegador. Credenciales:

   Usuario: desarrollohcd

   Contraseña: "la misma que se utiliza en el correo [email protected]"

3. Desde la cuenta de desarrollohcd Invitar al usuario registrado en el paso 1 a la organización @hcd-bsas desde el siguiente enlace:

   https://www.npmjs.com/org/hcd-bsas/invite?track=existingOrgAddMembers

4. Autenticar solo una vez con el usuario registrado en el paso 1 desde la linea de comandos. Si ya se encuentra autenticado en la consola este paso ya no es necesario.

    npm login

5. Compilar la librería en modo producción:

    yarn build

6. Publicar librería con el comando publish, el cual preguntara cual es el nuevo número de versión. En donde "version": ..* --> El primer número corresponde a cambios grandes, el segundo nuevas funcionalidades y el tercero corrección de errores o cambios menores.

    npm publish

NOTA: Se puede conocer la ultima versión productiva desde el siguiente enlace: Listado de versiones.

Nota: En ocasiones da el error "You cannot publish over the previously published versions" al no poder cambiar la versión de la librería desde la linea de comandos. Para ello se debe aumentar el número de versión en la opción version del package.json

Publicación NPM VERSION BETA

1. Seguir los pasos previamente descriptos para publicar una versión productiva del 1 al 6, agregando al comando npm publish el parametro --tag beta y modificar la version en el archivo package.json incrementando en 1 el número de la ultima versión beta.

    npm publish --tag beta

NOTA: Se puede conocer la ultima versión beta desde el siguiente enlace: Listado de versiones.

Como hacer uso de la librería con NPM en un proyecto nuevo

Pero para poder instalar la librería en cualquier otro proyecto se debe correr el comando en el directorio donde el proyecto contenga las librerías javascript.

    yarn add @hcd-bsas/vue3-components

Luego es necesario importar los estilos en un archivo .scss

    @import "../../node_modules/@hcd-bsas/vue3-components/scss/global.scss";

Como actualizar la libreria

Si un proyecto se encuentra usando una versión previa de la libreria se puede actualizar todas las dependencias con el comando:

    yarn upgrade --force --latest

O, si se quiere actualizar a una versión en particular o volver a una versión previa se puede correr siguiente comando cambiando el número de version despues del @:

    yarn add @hcd-bsas/[email protected]
    yarn add @hcd-bsas/[email protected]

Despublicar una versión de la librería en NPM

En caso de que los cambios realizados en una versión publicada de la librería en NPM presenten errores o no ofrezcan el comportamiento esperado, es posible despublicar dicha versión de manera tal que ya no se encuentre disponible en el registro público del sistema para ser accedida y descargada por otros usuarios para sus proyectos. No obstante, debe tenerse en cuenta que, una vez publicada una nueva versión, su respectivo número asociado no puede reutilizarse aun si ésta se hubiera despublicado del sistema, por lo que cualquier publicación posterior tendrá que ser llevada a cabo asignándole un número de versión completamente distinto. El comando requerido para realizar la despublicación se indica a continuación; la primera línea correspondería a cualquier caso genérico, mientras que la segunda resultaría particularmente adecuada, a modo de ejemplo, si se deseara despublicar la versión "1.0.58" de esta librería:

    npm unpublish <package_name>@<version>
    npm unpublish @hcd-bsas/[email protected]

DOCUMENTACIÓNES OFICIALES

• Vue 3

• Vite

• Bootstrap 5

• Pinia

• Vue Router