Teclib_front NPM

Teclib (Front-end)

O pacote possui diferentes bibliotecas de forma a implementar de forma padronizada telas que serão padronizadas entre os sistemas tecnol

Iniciando o projeto

Para instalar a library da página de login

npm i teclib_front

Agora no arquivo main.js, que é o ponto de entrada principal da aplicação, fazemos o import do componente presente na library instalada

import FacialRegister from "teclib_front";
import FacialCapture from "teclib_front";
import LoginInput from "teclib_front";
import "teclib_front/dist/style.css";

No mesmo arquivo, criamos uma instância do componente na aplicação Vue.js

app.use(FacialRegister);
app.use(FacialCapture);
app.use(LoginInput);

Utilizando no projeto

Agora conseguimos utilizá-lo globalmente apenas chamando o componente em alguma das páginas

<facial-register></facial-register>
<FacialRegister />

<facial-capture></facial-capture>
<FacialCapture />

<login-input></login-input>
<LoginInput />

Modificando a biblioteca

Realizar as alterações necessárias e alterar a versão da biblioteca no arquivo package.json no campo version e fazer um novo build da lib

npm run build

Após feito o build, serão criados os arquivos minify dentro da pasta /dist e então iremos publicar no NPM

npm publish --access public

A partir daí, a nova versão já poderá ser atualizada pelo NPM através do comando

npm update teclib_front

Desinstalando a biblioteca

Para remover o pacote teclib_front do projeto, basta executar o comando

npm uninstall teclib_front

Estrutura

├── dist                  # Código fonte do projeto transformado e otimizado para produção
├── src/components        # Componentes disponibilizados na library
├── src/helpers           # Helper que realiza o mascaramento de atributos
├── src/services          # Axios interceptor para validar tokens de acesso e refresh token
├── index.js              # Registra os componentes globais fornecidos pela biblioteca para uso em outros aplicativos Vue
├── vite.config.js        # define a configuração de construção para o Vite, para construir uma biblioteca Vue
├── package.json          # Configurações e características do pacote