Encontrar componentes Vue.js que bata 100% com os requisitos do nosso layout sem termos que modificar ele em nosso próprio projeto não é nada fácil. Em 99,99% dos casos precisamos replicar e manter estas mesmas modificações em outros projetos nossos, tornando a manutenção um trabalho árduo e cansativo.
A forma mais fácil de manter um componente deste porte seria criando nosso próprio componente. Além de podermos usar em outros projetos vamos estar a poucos passos de disponibilizar online e ajudarmos outras pessoas que possam ter tido o mesmo problema.
Altera onde está nome-plugin para o nome do nosso projeto que no caso é my-simple-button
Vamos precisar alterar também o [entry]. É nele que informamos qual será o ponto de entrada do componente.
Se não informarmos ficando [entry], o ponto de entrada vai ser src/App.vue, mas precisamos que o ponto de entrada seja src/main.js. Ficando mais ou menos assim a sessão de Scripts
Rodando o novo comando vamos obter uma resposta parecida com esta:
DONE Compiled successfully in 4866ms
File Size Gzipped
dist/plugin-button.umd.min.js 70.49 KiB 25.14 KiB
dist/plugin-button.umd.js 222.08 KiB 60.92 KiB
dist/plugin-button.common.js 221.69 KiB 60.81 KiB
dist/plugin-button.css 0.33 KiB 0.23 KiB
Images and other types of assets omitted.
✨ Done in 7.16s.
Isso significa que a construção foi bem-sucedida. Olhando para a pasta dist podemos ver vários arquivos, precisamos definir qual vai ser usado por qualquer aplicação que importe nosso componente.
Vamos escolher o terminado com .common.js Então voltando para o package.json adicione o a sessão main, ficando assim:
Agora, para que possamos usar este componente em outros lugares, temos que informar o que será exportado.Indo no main.js e apagando tudo que contem nele, cole o seguinte código:
Não podemos esquecer de fazer o rebuild sempre que terminar de atualizar alguma coisa.
Se o componente precisar trabalhar com Vuex, vamos precisar de um pouquinho mais de código.
Temos que ter em mente que o Vue só permite uma instância do Vuex, logo, não vamos poder instalar esse plugin em nosso componente.
Mas para usar a store, precisamos apenas definir a estrutura dela e informar que nosso componente depende do Vuex instalado no projeto para funcionar.
Tanto faz se vamos usar a store de arquivo único ou modular. No final, será o mesmo processo de apenas informar o caminho do arquivo principal da store.
Para este exemplo, vou assumir a criação da store em um único arquivo para facilitar o entendimento. Vamos entrar no diretório src e criar um arquivo chamado store.js com o seguinte conteúdo:
const store = {
state: {
contador: 0
},
getters: {
contador: state => state.contador
},
mutations: {
increment (state) {
state.contador += 1
}
}
}
export default store
Volte para o arquivo MeuBotaopersonalizado.vue e altere seu código para este:
import botaoSimples from './components/MeuBotaopersonalizado.vue'
import store from './store.js'
export default {
install (Vue, options) {
// Precisamos que vuex seja passada como opção para que possamos registrar a vuex do componente
if (!options || !options.store) {
throw new Error('Inicie o componente com Vuex.')
}
options.store.registerModule('simplebutton', store)
Vue.component('simple-button', botaoSimples)
}
}
Devemos fazer o rebuild novamente.
Após fazermos o build, o componente já está pronto para ser usado em qualquer projeto nosso.
Se não publicarmos no NPM podemos usar da seguinte forma:
Estando em um projeto que queremos usar o componente, devemos abrir um terminal neste diretório e rodar o comando:
yarn add ../my-simple-button
Não esqueça de passar o caminho correto. Esse foi somente para exemplo.
Depois devemos ir no arquivo main.js deste projeto e fazer a instalação do nosso componente.
import mySimpleButton from my-simple-button;
// Podemos usar assim, passando as opcoes
Vue.use(mySimpleButton, {algumaOpcao: algumValor})
// ou assim, sem opcoes
Vue.use(mySimpleButton)
Temos duas formas de usar: a com opção e a sem opção.
O nosso componente precisa da store, logo temos que usar a primeira opção.
import Vue from 'vue'
import App from './App.vue'
import store from './store';
import mySimpleButton from my-simple-button;
Vue.config.productionTip = false
Vue.use (mySimpleButton, { store });
new Vue({
store,
render: h => h(App),
}).$mount('#app')
Desta forma, o nosso componente está definido no nível da aplicação como o Vuex e não no componente que formos usar ele dentro.
O nome que ele vai ser chamado vai ser sempre o que definimos no main.js do nosso componente.
import botaoSimples from './components/MeuBotaopersonalizado.vue'
import store from './store.js'
export default {
install (Vue, options) {
if (!options || !options.store) {
throw new Error('Inicie o componente com Vuex.')
}
options.store.registerModule('simplebutton', store)
Vue.component('bolacha-doce', botaoSimples)
}
}
Neste exemplo eu alterei o nome para bolacha-doce, logo, para usar:
Muito fácil criar e compartilhar componentes/plugins.
Desta mesma forma que criamos o nosso componente, poderíamos ter encapsulado o componente de outra pessoa, como por exemplo uma estilização diferente em um botão do Bootstrap com algumas ações ao clicar ou passar o mouse.
Podemos disponibilizar também com o componente mixins, hooks, filters e muitas outras coisas.
O que vimos aqui foi apenas uma das N’s configurações que podemos fazer no install do nosso componente.
Isso pode ser um plus para um outro artigo.
O que podemos fazer agora é publicar no NPM facilitando para disponibilizar para a comunidade usar. Bom, isso foi tudo pessoal.
Qualquer dúvida ou sugestão deixe nos comentários, vamos sempre estar de olho! Para conferir outros assuntos no nosso blog, basta clicar aqui. Obrigado pela leitura!
Até a próxima!
Publicado por:
⠀
Antônio Santos
Compartilhe:
Conheça a Kody, sua nova gerente de projetos com IA!
Ao adotar o framework ágil do Scrum, é essencial compreender e utilizar as métricas-chave para avaliar o desempenho e identificar oportunidades de melhoria. Essas métricas fornecem insights valiosos sobre o
O Fluxo Scrum é uma abordagem ágil fundamental na gestão de projetos, especialmente no desenvolvimento de software. Este método proporciona uma estrutura flexível e adaptativa, essencial para enfrentar os desafios
No atual cenário de desenvolvimento de software, a pressão por eficiência e velocidade de entrega nunca foi tão intensa. Empresas de todos os tamanhos estão buscando maneiras de acelerar o