Te presentaremos cómo crear y publicar biblioteca de componentes Vue, la cual facilita el aspecto de las aplicaciones.
Últimamente las bibliotecas de componentes han cobrado mucha fuerza entre los desarrolladores. Muchos han utilizado una de estas bibliotecas, pero es muy diferente crear una.
Para crear esta biblioteca de componentes, se requiere utilizar vue-sfc-rollup del paquete npm. Este paquete es muy útil cuando se inicia una biblioteca de componentes.
Si tienes una biblioteca y deseas utilizarla, consulta la documentación que npm proporciona en la siguiente liga.
Este paquete crea un conjunto de archivos para comenzar el proyecto. Como se indica en la documentación, los archivos que se crearán incluyen lo siguiente (SFC representan un Single File Component):
- Configuración de rollup
- Un archivo package.json correspondiente con scripts de compilación / dev y dependencias
- Archivo mínimo de babel.config.js y .browserslistrc para transpilar
- Un envoltorio utilizado por el paquete acumulativo al empaquetar su SFC
- Muestra de SFC para iniciar el desarrollo
- Archivo de uso de muestra que se puede usar para cargar / probar su componente / biblioteca durante el desarrollo
La utilidad admite componentes de un solo archivo, así como una biblioteca de componentes. Es importante tener en cuenta dentro de la documentación que en el modo biblioteca, también hay un ‘índice’ que indica los componentes expuestos como parte de su biblioteca.
Lo anterior significa que habrá algunos archivos adicionales generados en el proceso de configuración.
Construir la biblioteca
Primero debes instalar vue-sfc-rollup:
npm install -g vue-sfc-rollup
Una vez que esté instalado, desde la línea de comando, ve al directorio donde deseas ubicar el proyecto de biblioteca. Una vez que esté en la carpeta, ejecuta el siguiente comando para inicializar el proyecto:
sfc-init
Elige alguna de las siguientes opciones dentro de las indicaciones:
- ¿Este es un componente único o una biblioteca? Biblioteca
- ¿Cuál es el nombre npm de su biblioteca? (esto tendrá que ser único en npm. Usa brian-component-lib)
- ¿Esta biblioteca se escribirá en JavaScript o TypeScript? JavaScript (deberás usar TypeScript)
Ingresa una ubicación para guardar los archivos de la biblioteca. El valor predeterminado será el nombre npm que le diste arriba para que puedas presionar enter.
Una vez completada la configuración, ve a la carpeta y ejecuta una instalación npm.
cd path/to/my-component-or-lib
npm install
Una vez hecho esto, puedes abrir la carpeta en el editor de tu elección.
Como se indicó anteriormente, hay un componente Vue de muestra creado para nosotros. Puedes encontrarlo dentro de la /src/lib-components carpeta. Para ver cómo se ve este componente, puede ejecutar npm run serve y navegar a http: // localhost: 8080 /
Ahora agrega un propio componente personalizado. Crea un nuevo archivo Vue dentro de la carpeta lib-components. Para este ejemplo, puedes imitar el botón utilizado en las secciones de asignación de freeCodeCamp, así que puedes nombrarlo FccButton.vue.
Puedes copiar y pegar este código en tu archivo:
<template>
<button class=»btn-cta»>{{ text }}</button>
</template>
<script>
export default {
name: «FccButton», // vue component name
props: {
text: {
type: String,
default: «Enter Button Text Here»
}
},
data() {}
};
</script>
<style>
.btn-cta {
background-color: #d0d0d5;
border-width: 3px;
border-color: #1b1b32;
border-radius: 0;
border-style: solid;
color: #1b1b32;
display: block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
white-space: nowrap;
padding: 6px 12px;
font-size: 18px;
line-height: 1.42857143;
}
.btn-cta:active:hover,
.btn-cta:focus,
.btn-cta:hover {
background-color: #1b1b32;
border-width: 3px;
border-color: #000;
background-image: none;
color: #f5f6f7;
}
</style>
Podrás ver que tenemos la sección de plantilla básica en la parte superior con la clase deseada. También puedes usar el texto con que el usuario pasará.
Dentro de la etiqueta del script tenemos el nombre del Componente y los accesorios que tomará. En este caso, solo hay un accesorio llamado text que tiene un valor predeterminado que indica: «Ejecutar las pruebas».
También tendrás algunos estilos para darle un aspecto.
Para ver cómo se ve el componente, necesitaremos agregarlo al archivo index.js ubicado en la carpeta lib-components. Tu archivo index.js debería verse así:
/* eslint-disable import/prefer-default-export */
export { default as FccButton } from ‘./FccButton’;
También deberás importar el componente en el archivo serve.vue dentro de la carpeta dev para que se vea así:
<script>
import Vue from «vue»;
import { FccButton } from «@/entry»;
export default Vue.extend({
name: «ServeDev»,
components: {
FccButton
}
});
</script>
<template>
<div id=»app»>
<FccButton />
</div>
</template>
Es posible que debas ejecutar npm run servenuevamente para poder ver el botón, pero debería estar visible cuando navegues a http: // localhost: 8080 / en el navegador.
Hasta ahora hemos construido el componente que queríamos. Deberás seguir este mismo proceso para cualquier otro componente que quieras construir. Solo asegúrate de exportarlos en el archivo /lib-components/index.js para que estén disponibles en el paquete npm que vamos a publicar.
Publicación en NPM
Ahora que estamos listos para publicar la biblioteca en NPM, necesitaremos pasar por el proceso de compilación para que se empaquete y quede lista para funcionar.
Antes de ejecutar el comando de compilación, recomendamos cambiar el número de versión en el archivo, package.json 0.0.1ya que este es el primer evento de publicación para nuestra biblioteca. Ten por seguro que desearemos más de un solo componente en la biblioteca antes de lanzar la ‘primera’ versión oficial. Puede leer más sobre las versiones semánticas aquí https://docs.npmjs.com/about-semantic-versioning
Para hacer esto, debemos correr la función npm run build.
Como dice la documentación:
La ejecución de la escritura de la estructura en 3 archivos compilados en el directorio dist uno para cada uno de main, moduley unpkg las propiedades que estarán en el archivo de package.json. Con estos archivos generados, se podrá comenzar.
Con este comando ejecutado, estamos listos para publicar en NPM. Antes de hacer esto, asegúrate de tener una cuenta en NPM.
A continuación, necesitaremos agregar la cuenta a la terminal ejecutando:
npm adduser
Comprendiendo package.json
Cuando publicamos en npm, utilizamos el archivo package.json para controlar qué archivos se publican. Si observas el archivo package.json que se creó cuando configuramos inicialmente el proyecto, verás algo como esto:
«main»: «dist/brian-component-lib.ssr.js»,
«browser»: «dist/brian-component-lib.esm.js»,
«module»: «dist/brian-component-lib.esm.js»,
«unpkg»: «dist/brian-component-lib.min.js»,
«files»: [
«dist/*»,
«src/**/*.vue»
],
La sección debajo files le dirá a npm que publique todo en nuestra carpeta dist así como cualquier archivo .vue dentro de nuestra carpeta src. Puedes actualizar esto como mejor te parezca.
Debido a que no estamos cambiando nada con el archivo package.json, estamos listos para publicar. Para hacer eso solo necesitamos ejecutar el siguiente comando:
npm publish
Puedes ir a npmjs.com y encontrarlo en el registro.
Leíste: Cómo crear y publicar biblioteca de componentes Vue, te recomendamos: cómo instalar PHP en Windows
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
