Storybook para o Vue tutorial

Configuração do Vue Storybook no ambiente de desenvolvimento

Storybook funciona em paralelo à aplicação em modo de desenvolvimento. Ajuda na construção de componentes de interface de utilizador isolados de qualquer lógica e contexto da aplicação. Esta edição de Aprendizagem de Storybook é destinada para Vue. Encontram-se disponíveis outras edições quer para React, quer para Angular.

Storybook e a aplicação

Configuração de Storybook com Vue

Irão ser necessárias algumas etapas adicionais de forma a ser possível configurar o processo de compilação no nosso ambiente de desenvolvimento. Para começar queremos usar o pacote Vue CLI para configurar o nosso ambiente local e ativar o modo de testes com Storybook e Jest na nossa aplicação.

# Create our application, using a preset that contains jest:
npx -p @vue/cli vue create --preset hichroma/vue-preset-learnstorybook taskbox
cd taskbox

# Add Storybook:
npx -p @storybook/cli sb init

Podemos rapidamente verificar que os vários ecossistemas da nossa aplicação estão a funcionar corretamente através de:

# Run the test runner (Jest) in a terminal:
yarn test:unit

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 8080:
yarn serve
Nota: Se yarn test:unit, emitir num erro, poderá ser devido ao facto que o yarn não esteja instalado, ou então será necessário instalar o pacote watchman, tal como recomendado neste problema

Sendo estes os seguintes: testes automáticos (Jest), desenvolvimento de componentes (Storybook) e a aplicação em si.

3 modalidades

Dependendo de qual parte da aplicação que estamos a trabalhar, podemos querer executar um ou mais simultâneamente. Visto que neste caso, o foco é a criação de um componente de interface de utilizador simples, iremos cingir-nos somente á execução de Storybook.

Reutilizar CSS

A Taskbox reutiliza elementos de design do tutorial de React e GraphQL Tutorial React e GraphQL, como tal não será necessária a criação de CSS neste tutorial.

O CSS compilado encontra-se disponível aqui e deverá ser adicionado ao seguinte ficheiro src/index.css e em seguida importado para a aplicação através da edição do elemento <style> no ficheiro src/App.vue, de forma a que seja idêntico a:

<style>
  @import './index.css';
</style>

Interface Utilizador Taskbox

Se for necessária alguma alteração aos elementos de estilo, os ficheiros LESS originais encontram-se disponíveis no repositório Github.

Adicionar recursos

Irá ser necessário adicionar também as pastas com o tipo de letra e ícones que se encontram disponíveis aqui á pasta public.

O script para executar o storybook (que se encontra no ficheiro package.json) também terá que ser alterado, de forma a que a pasta public possa ser servida:

{
  "scripts": {
    "storybook": "start-storybook -p 6006 -s public"
  }
}

Ao adicionar estes elementos, a aplicação irá renderizar de forma algo estranha. Mas isto é de esperar, visto que não iremos trabalhar na aplicação agora. Iremos então iniciar o desenvolvimento do nosso primeiro componente!

Next Chapter
Componente simples
Construção de um componente simples isolado