Como criar e publicar uma biblioteca de componentes do Vue

cd path/to/my-component-or-lib

npm install

Feito isso, você pode abrir a pasta no seu editor de escolha.

Como mencionado acima, existe um exemplo de componente Vue criado para nós. Você pode encontrá-lo dentro do /src/lib-components pasta. Para ver como esse componente se parece, você pode executar npm run serve e navegue até http: // localhost: 8080 /

Agora vamos adicionar nosso próprio componente personalizado. Crie um novo arquivo Vue dentro do lib-components pasta. Neste exemplo, eu vou imitar o botão usado nas seções de atribuição freeCodeCamp, então o nomeei FccButton.vue

Você pode copiar e colar este código no seu arquivo:

<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>

Você pode ver que temos a seção básica de modelos no topo da classe que queremos que ela tenha. Ele também usa o texto que o usuário passará.

Dentro da tag de script, temos o nome do componente e os adereços que o componente receberá. Nesse caso, há apenas um adereço chamado text que tem o padrão “Executar os testes”.

Também temos alguns estilos para dar a aparência que queremos.

Para ver a aparência do componente, precisamos adicioná-lo ao index.js arquivo localizado no lib-components pasta. O seu arquivo index.js deve ficar assim:

/* eslint-disable import/prefer-default-export */
export { default as FccButton } from './FccButton';

Você também precisará importar o componente para o diretório serve.vue arquivo dentro do dev pasta para ficar assim:

<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>

Pode ser necessário executar npm run serve novamente para poder ver o botão, mas ele deve estar visível quando você navegar para http: // localhost: 8080 / no seu navegador.

Então, criamos o componente que queríamos. Você seguirá esse mesmo processo para qualquer outro componente que desejar criar. Apenas certifique-se de exportá-los no diretório /lib-components/index.js para torná-los disponíveis no pacote npm que estamos prestes a publicar.

Agora que estamos prontos para publicar a biblioteca no NPM, precisamos passar pelo processo de compilação para que ela seja empacotada e pronta para uso.

Antes de executar o comando build, recomendo alterar o número da versão no diretório package.json arquivo a ser 0.0.1 já que este é o primeiro evento de publicação da nossa biblioteca. Queremos mais do que apenas um componente na biblioteca antes de lançar a ‘primeira’ versão oficial. Você pode ler mais sobre controle de versão semântico aqui.

Para fazer isso, corremos npm run build.

Como a documentação declara:

A execução do script de construção resulta em 3 arquivos compilados no diretório dist diretório, um para cada um dos main, modulee unpkg propriedades listadas no seu arquivo package.json. Com esses arquivos são gerados, você está pronto para começar!

Com esse comando executado, estamos prontos para publicar no NPM. Antes de fazer isso, verifique se você possui uma conta no NPM (que você pode fazer aqui se você precisar).

Em seguida, precisamos adicionar sua conta ao seu terminal executando:

npm adduser

Compreendendo o package.json

Quando publicamos no npm, usamos o arquivo package.json para controlar quais arquivos são publicados. Se você olhar para o package.json arquivo criado quando configuramos o projeto, você verá algo assim:

"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"
],

A seção em files diz à NPM para publicar tudo em nossa dist pasta, bem como qualquer .vue arquivos dentro do nosso src pasta. Você pode atualizar isso como achar melhor, mas deixaremos como está neste tutorial.

Como não estamos alterando nada com o arquivo package.json, estamos prontos para publicação. Para fazer isso, precisamos apenas executar o seguinte comando:

npm publish

E é isso aí! Parabéns! Agora você publicou uma biblioteca de componentes do Vue. Você pode ir para npmjs.com e encontre-o no registro.