1

Comecei a trabalhar muito com vue e passei a utiliza-lo em todos os projetos na empresa em que trabalho. E com isso, acabei criando alguns componentes, em geral autocomplete, sei que existem muitos, já cheguei a utilizar alguns, mas nenhum supriu todas as minhas necessidades. Porem, sempre que vou trabalhar em um novo projeto e utilizar o mesmo componente, ou eu recrio ele, ou eu copio e colo.

Então me veio a duvida Como criar o meu componente, subir para o npmjs para sempre que eu for utiliza-lo, apenas dar um npm install -save ..., e tambem poder contribuir um pouco com a comunidade.

1 Resposta 1

5

Você deverá versionar todos os seus componentes separadamente e indicar qual é o arquivo de índice (no caso o arquivo do componente) no package.json.

Exemplo de componente de input de formulário usando o webpack

  • Primeiro, crie uma pasta e dê um git init nela.
  • Dentro dela crie o arquivo do componente, no caso desse exemplo o AppFormInput.vue contendo toda a estrutura, lógica e estilo do componente.
  • Agora, crie um package.json (pode ser o padrão do npm init) porém você deve indicar qual é o arquivo "main", do mesmo modo abaixo:

    "name": "app-form-input",
    "version": "1.0.0",
    "main": "AppFormInput.vue",
    "author": {
    
        "name" : "Dian Carlos"
    
    }
    

Após isso dê os commits e siga os passos padrões para subir um projeto no npm, que você encontra em https://docs.npmjs.com/getting-started/publishing-npm-packages

Com o componente publicado, você será capaz de instalar ele com npm i --save app-form-input.

Exemplo de uso do componente dentro de um arquivo .vue

<template>

    <div class="form">

        <app-form-input name="titulo"></app-form-input>

    </div>

</template>

<script>

import AppFormInput from 'app-form-input';

export default {

    components : {

        AppFormInput

    }

}

</script>

<style lang="css">

    .form {

        float: left;

        width: 100%;

    }

</style>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .