Librería de componentes vue 3 - GAIA

Esta librería lo ayudará a relizar el proceso de desarrollo Front-End de una manera más simple. El objetivo de esta es alojar los componentes que se repitan en más de un sitio web administrado por GAIA (CDIAC, IDEA, SAT, etc... ).

Para ver la documentación de los componentes que hay en la librería (click aquí)

Tabla de contenidos

• Recomendaciones para el uso de la librería
• Uso de la librería
  • Ejemplo con composition api
  • Ejemplo con options api
• Recomendaciones para el desarrollo de la librería
• Desarrollo de la librería
  • Documentación de un componente
  • Propiedades de un componente
  • Estructura de archivos
  • Exportar un componente a npm

Recomendaciones para el uso de la librería

• Tener instalado Node v16.15.1 o superior + NPM v8.11.0 o superior
• Si trabaja con varias versiones de nodejs en un mismo equipo use NVM para cambiar entre versiones.

Uso de la librería

Para ver los componentes y sus propiedades. (click aquí)

1. Instalar en el proyecto la librería ejecutando:

$ npm i gaia-components-vue3

2. Importar en el archivo 📝main.js los estilos de la librería:

import 'gaia-components-vue3/dist/style.css'

3. Donde requiera usar el componente de la librería, podrá importarlo como:

import { componente1, componente2 } from 'gaia-components-vue3'

Si se importan dentro de vue-composition-API, directamente los podrá llamar como etiqueta en el template, de modo contrario deberá registrarlo como componente.

Ejemplo con composition api:

<script setup>
  import { componente1 } from 'gaia-components-vue3'
</script>

<template>
  <componente1 :prop="value" />
</template>

Ejemplo con options api:

<script>
  import { componente1 } from 'gaia-components-vue3'

  export default {
    components: {
      componente1
    }
  }
</script>

<template>
  <componente1 :prop="value" />
</template>

Recomendaciones para el desarrollo de la libreria

• Usar VScode como editor de código.
• Extenciones recomendadas de VScode:
  • Prettier - Code formatter
  • Tailwind CSS IntelliSense
  • Trailing Spaces
  • Vetur
  • Volar

Desarrollo de la librería (creación y publicación de un componente)

Cada componente debe contar con su propia carpeta dentro del directorio 🗂️/compoents en la cual se encontrará:

Documentación de un componente:

• Un 📝README.md donde se encuentra una imagen del componente y se explique su importación y las propiedades que recibe.

• Una carpeta llamada 🗂️/example donde se encuentran los recursos usados dentro del README.md como la imagen de ejemplo del componente.

• El archivo 📝README.md

Propiedades de un componente

Las propiedades en los componentes deben de estar definidas con su valor por defecto y tipo de valor:

• En caso de que una propiedad reciba como valor por defecto un objeto o un array, este ejemplo se encontrará dentro del componente en una carpeta llamada 🗂️/js.

Estructura de archivos

• En caso de que se requieran usar imágenes en la construcción por defecto del componente, se guardarán en una carpeta llamada 🗂️/images.

• Si requiere algún recurso adicional como algún pdf o algún otro tipo de archivo no especificado en esta documentación, se guardará en una carpeta llamada 🗂️/docs

El componente quedaría con una estructura como la siguiente:

Exportar componente a npmjs.com

Para exportar el componente recién creado, dentro de la carpeta 🗂️/components se encuentra un archivo 📝.js llamado 📝index.js

Allí se debe importar el archivo principal del componente recién creado, en el caso del componente de ejemplo sería:

export { default as ComponentExample } from './ComponentExample/ComponentExample.vue'

Pdt: Los componentes deben ser nombrados en inglés

Luego de importado, se debe de cambiar la versión de la librería en el 📝package.json

Y ejecutar el siguiente comando en la terminal:

$ npm run build

#Construye la carpeta 🗂️/dist en la raiz del proyecto que será exportada a npm

Y luego:

$ npm publish

#Exporta la carpeta 🗂️/dist a npm