@isdg/miscomponentesvue v0.1.3

Mis componentes para vue

Instalación del paquete

yarn add @isdg/miscomponentesvue

Demo del paquete

Para ver en funcionamiento los componentes incorporados en el paquete, ejecutar:

yarn run serve

Uso del paquete

• Para importarlo, agregar la siguiente linea en el archivo principal del proyecto app.js:

  import '@isdg/miscomponentesvue'

• Para utlizar un componente en particular, solo de debe llamarlo en el lugar que se quiere mostrar, ej:

  <template>
      ...
      <TituloPagina :titulo="titulo" :descripcion="descripcion" />
      ...
  </template>
  ...

Lista de componentes:

Todos los componentes están registrados en Vue global y están disponibles para su uso. No es necesario volver a registrarlos.

Componente -Banner-

Muestra una barra con un texto predeterminado

Uso

<Banner position="bottom">Este es mi propio banner!</Banner>

Propiedades y/o parametros

position: En un String que indica la posición del banner. Puede tomar los valores: top o bottom. Por defecto es bottom. styles: En un Objeto que contiene los estilos para personalizar el fondo, color, etc. de tu banner. Por defecto, el banner ocupará el 100% del ancho total de la página.

Componente -Boton volver-

Muestra un boton para volver a la pagina anterior.

Uso

<BtnVolver />

Componente -Migas de pan-

Muestra una fila con las migas de pan de la pagina

Uso

<MigasDePan :migas="arrMigas" />

Propiedades y/o parametros

migas: En un Array que contiene los valores de los diferentes niveles de las migas. El array tendra los siguientes valores:

[
    { text: 'Inicio', name: 'route-name', disabled: false },
    { text: 'Nivel1', name: 'route-name', disabled: false },
    { text: 'Nivel2', name: 'route-name', parametros: 'valor-parametro', disabled: false },
    { text: 'Nivel3', name: '', disabled: true },
]

Componente -Título de página-

Muestra una fila con el título y descripción de la página

Uso

<TituloPagina :titulo="titulo" :descripcion="descripcion" />

Propiedades y/o parametros

titulo: En un String que contiene el texto a mostrar como titulo. descripcion: En un String que contiene el texto a mostrar como descripción de la página.

Creación del paquete/libreria:

Para la creacion de este paquete/libreria se siguieron los siguientes pasos:

• Si no se tiene, se instala el VUE-CLI 3.0 y se crea la aplicación:

  yarn global add @vue/cli
  vue create nombre-paquete

• En el directorio src/components/ se iran guardando los archivos de los componentes.
• En el archivo package.json tendremos que realizar algunas modificaciones para que nuestro paquete se configure correctamente:
  • Añadir el nombre del paquete/libreria:

    "name": "@organizacion/nombre-paquete",

  • Añadir el nombre del archivo donde estara compilado mi paquete :

    "main": "./dist/nombre-archivo.umd.js",

  • Añadir el script de compilación de mis componentes, y la ruta de origen de los mismos:

    "scripts": {
        ...
        "build-bundle": "vue-cli-service build --target lib --name nombre-archivo ./src/components/index.js",
        ...
    },

  • Agregar la ruta de la etructura de directorios de mi paquete:

    "files": [
        "dist/*",
        "src/*",
        "public/*",
        "*.json",
        "*.js"
    ],

  • Cambiar la linea que viene por defecto en true (para que se pueda publicar en un repositorio npm público):

    "private": false,

• Crear al archivo src/components/index.js con los componentes a publicar:

  import Vue from "vue";
  import Componente1 from "./Componente1.vue";
  import Componente2 from "./Componente2.vue";
  import Componente3 from "./Componente3.vue";
  
  const Components = { Componente1, Componente2, Componente3 };
  
  Object.keys(Components).forEach(name => {
      Vue.component(name, Components[name]);
  });
  
  export default Components;

• Crear al archivo vue.config.js, en la raiz del proyecto, con la configuración de la publicación del paquete:

  module.exports = {
  css: {
      extract: false,
  },
  };

  Esto es para que se compilen los estilos en el mismo archivo final, y no se tengan que importar por separado en el proyecto final. De lo contrario se compila en un archivo .css los estilos de los componentes.

• Instalar las dependencias necesarias, ejecutar:

  yarn install
  yarn upgrade

• Crear usuario en NODEJS o directamente por la consola con el comando:

  npm adduser

• Hacer login desde la consola con el comando:

  npm login

• Se puede verificar que estoy autenticado con el comando:

  npm whoami

• Para compilar el paquete ejecutar:

  npm run build-bundle

• Para publicar el paquete ejecutar:

  npm publish --access public

• Para publicar versión preliminar:

  npm publish --tag beta