Componentes Single-File

Introdução

Em muitos projetos Vue, componentes globais serão definidos com Vue.component, seguidos por new Vue({ el: '#container '}) para atingir um elemento container no corpo de cada página.

Isto pode funcionar bem em projetos pequenos e médios, onde o JavaScript só é utilizado para incrementar certas interfaces. No entanto, em projetos mais complexos ou quando o frontend é totalmente dirigido pelo JavaScript, tais desvantagens se tornam aparentes:

Tudo isso é resolvido através dos Componentes Single-File com a extensão .vue, possibilitados graças a ferramentas de build como Webpack ou Browserify.

Aqui está um exemplo de um arquivo que chamaremos de Hello.vue:

Single-file component example (click for code as text)

Agora nós obtivemos:

Como prometido, podemos também utilizar pré-processadores como Pug (Jade), Babel (com módulos ES2015+) e Stylus para componentes mais limpos e mais ricos em recursos.

Single-file component example with preprocessors (click for code as text)

Estas linguagens específicas são meros exemplos. Poderíamos tão facilmente usar Bublé, TypeScript, SCSS, PostCSS - ou qualquer outro que acreditarmos nos tornar mais produtivos. Se usar Webpack com vue-loader, também há suporte de primeira classe a CSS Modules.

E a Separação de Responsabilidades?

Uma coisa importante a observar é que separação de responsabilidades não é igual a separação de tipos de arquivo. No desenvolvimento moderno de interfaces, chegamos à conclusão de que, ao invés de dividir a base de código em três grandes camadas que se entrelaçam umas com as outras, faz muito mais sentido dividi-las em componentes fracamente acoplados e utilizá-los para composição. Dentro de um componente, seu template, sua lógica e seus estilos são inerentemente acoplados, e encará-los dessa forma os torna componentes mais coesos e manuteníveis.

Se mesmo assim não gostar da ideia de Componentes Single-File, você ainda pode tirar vantagem de seus recursos de hot-reloading (recompilação e atualização em tempo real ao salvar o código) e de pré-compilação, separando JavaScript e CSS em arquivos distintos:

<!-- my-component.vue -->
<template>
  <div>Isso será pré-compilado</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

Primeiros Passos

Exemplo Sandbox

Se você quiser se mergulhar agora mesmo e começar a brincar com Componentes Single-File, dê uma olhada neste aplicativo de lista de tarefas simples no CodeSandbox.

Para Iniciantes com Empacotadores

Com componentes .vue, estamos entrando no reino das aplicações JavaScript avançadas. Significa aprender a utilizar algumas ferramentas adicionais se ainda não teve oportunidade:

Depois que tiver tirado um dia para mergulhar nestes tópicos, recomendamos dar uma olhada no Vue CLI 3. Seguindo as instruções, você terá em mãos um projeto Vue com componentes .vue, ES2015, Webpack e hot-reloading, rodando em pouquíssimo tempo!

Para Usuários Avançados

A CLI cuida da maioria das configurações de ferramentas para você, mas também permite a personalização grã-fina através de suas próprias opções de configuração.

Caso você prefira configurar seu próprio build a partir do zero, você precisará configurar manualmente o webpack com o vue-loader. Para saber mais sobre o webpack, confira os documentos oficiais e a Webpack Academy.