Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (63 sloc) 3.91 KB
title tocTitle description
Introdução
Introdução
Configuração do Vue Storybook no ambiente de desenvolvimento

Storybook para o Vue tutorial

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

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!

You can’t perform that action at this time.