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 em si, dê uma olhada em sua documentação oficial e na Academia Webpack.

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.