npm package: @isdg/miscomponentesvue
Description: ```bash yarn add @isdg/miscomponentesvue ```
Latest version: 0.1.3

# Mis componentes para vue

## Instalación del paquete
```bash
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``: 
    ```javascript
    import '@isdg/miscomponentesvue'
    ```
* Para utlizar un componente en particular, solo de debe llamarlo en el lugar que se quiere mostrar, ej:
    ```javascript
    <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
```javascript
<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
```javascript
<BtnVolver />
```

### Componente -Migas de pan-
Muestra una fila con las migas de pan de la pagina
#### Uso
```javascript
<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
```javascript
<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:
    ```json
    "name": "@organizacion/nombre-paquete",
    ```
    * Añadir el nombre del archivo donde estara compilado mi paquete :
    ```json
    "main": "./dist/nombre-archivo.umd.js",
    ```
    * Añadir el script de compilación de mis componentes, y la ruta de origen de los mismos:
    ```json
    "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:
    ```json
    "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):
    ```json
    "private": false,
    ```
* Crear al archivo ``src/components/index.js`` con los componentes a publicar:
    ```javascript
    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:
    ```javascript
    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](https://www.npmjs.com/) 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
    ```