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 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 dirijido 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 simples exemplo de um arquivo que chamaremos de Hello.vue:

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.

Estas linguagens específicas são meros exemplos. Poderíamos tão facilmente usar Buble, 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 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 dividir 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 realmente torna os 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

Iniciante em Sistemas de Build

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, dê uma olhada no modelo de projeto webpack-simple. Seguindo as instruções, você terá em mãos um projeto Vue com componentes .vue, ES2015 e hot-reloading, rodando em pouquíssimo tempo!

Este modelo de projeto utiliza o Webpack, um “empacotador de módulos” (module bundler), que pega vários módulos (arquivos JavaScript diversos) e então os combina em uma aplicação final. Para aprender mais sobre o Webpack, este vídeo (em inglês) pode ser uma boa introdução. Depois que você passar do básico, talvez queira conferir este curso avançado de Webpack em Egghead.io (também em inglês).

No Webpack, cada módulo pode ser transformado por um plugin “carregador” (loader) antes de ser incluído no pacote. Para isso, Vue oferece o plugin vue-loader, responsável por cuidar da transformação dos arquivos .vue em JavaScript carregável pelo empacotador. O modelo de projeto webpack-simple já possui tudo configurado para você, mas se estiver interessado em entender mais a fundo como os componentes .vue funcionam com o Webpack, sugerimos que leia a documentação do vue-loader.

Para Usuários Avançados

Independetemente de sua preferência por Webpack ou por Browserify, temos modelos de projeto documentados para ambos, tanto para projetos simples quanto para mais complexos. Recomendados que vasculhe o repositório github.com/vuejs-templates, escolhendo o template que considerar mais adequado para o seu caso, seguindo as instruções de cada README para gerar um novo projeto com ajuda da ferramenta vue-cli.