Minor fixes and updates (#643)

Author: anteriovieira

docs/pt/README.md

@@ -6,32 +6,33 @@
 
 ![screenshot](http://blog.evanyou.me/images/vue-component.png)
 
-Existem muitas características interessantes fornecidos por `vue-loader`:
+Existem muitos recursos interessantes fornecidos por `vue-loader`:
 
-* ES2015 habilitado por padrão;
-* Permite usar outros carregadores Webpack para cada pedaço de um componente Vue, por exemplo SASS para `<style>` e Jade para `<template>`;
-* Trata ativos estáticos referenciado em `<style>` e `<template>` como dependência de módulo e então manipula com carregadores Webpack;
-* Pode simular escopo CSS para cada componente;
-* Suporta componente hot-reloading durante desenvolvimento;
+- ES2015 habilitado por padrão;
+- Permite usar outros carregadores Webpack para cada pedaço de um componente Vue, por exemplo SASS para `<style>` e Jade para `<template>`;
+- Permite seções customizadas em um arquivo .vue que pode ter carregadores encadeados personalizados aplicados a eles;
+- Trata ativos estáticos referenciado em `<style>` e `<template>` como dependência de módulo e então manipula com carregadores Webpack;
+- Pode simular escopo CSS para cada componente;
+- Suporta componente hot-reloading durante desenvolvimento;
 
 Em poucas palavras, a combinação de Webpack e `vue-loader` dá-lhe um moderno, flexível e extremamente poderoso fluxo de trabalho front-end para criação de aplicações Vue.js.
 
 ### O que é Webpack?
 
 Se você já está familiarizado com Webpack, sinta-se livre para pular está explicação. Mas para aqueles de vocês que são novos com Webpack, aqui está uma pequena introdução:
 
-[Webpack](http://webpack.github.io/) é um empacotador de módulo. Ele carrega um grupo de arquivos tratando cada um como um módulo, descobrindo as dependências entre eles e empacotando em ativos estáticos prontos para implantação.
+[Webpack](http://webpack.github.io/) é um empacotador de módulo. Ele pega um grupo de arquivos, trata cada um como um módulo, descobre as dependências entre eles e empacota em ativos estáticos prontos para implantação.
 
 ![webpack](http://webpack.github.io/assets/what-is-webpack.png)
 
 Para um exemplo básico, imagine que nós temos um monte de módulos CommonJs. Eles não podem rodar diretamente dentro do navegador, então precisamos empacotá-los dentro de um único arquivo que pode ser incluído através de uma tag `<script>`. Webpack pode seguir as dependências das chamadas  `require()` e fazer isso para nós.
 
 Mas Webpack pode fazer mais do que isso. Com "carregadores", podemos ensinar Webpack a transformar todos os tipos de arquivos dá maneira que quisermos antes da saída final do pacote. Alguns exemplos incluem:
 
-* Transpilar módulos ES2015, CoffeScript ou TypeScript em módulos simples CommonJs ES5;
-* Opcionalmente você pode canalizar o código fonte através de um linter \(analisador de código\) antes de fazer a compilação;
-* Transpilar modelos Jade em HTML simples em seguida colocao-o como uma sequência de string JavaScript;
-* Traspilar arquivos SASS em CSS simples, em seguida os converte em trechos de código JavaScript que insere o resultado CSS como uma tag `<style>`;
-* Processar um arquivo de imagem referenciado em HTML ou CSS, movê-la para o destino desejado baseado no arquivo de configuração, e nomeá-la usando seu hash md5; 
+- Transpilar módulos ES2015, CoffeScript ou TypeScript em módulos simples CommonJs ES5;
+- Opcionalmente você pode canalizar o código fonte através de um linter \(analisador de código\) antes de fazer a compilação;
+- Transpilar modelos Jade em HTML simples em seguida colocá-lo como uma sequência de string JavaScript;
+- Traspilar arquivos SASS em CSS simples, em seguida os converte em trechos de código JavaScript que insere o resultado CSS como uma tag `<style>`;
+- Processar um arquivo de imagem referenciado em HTML ou CSS, movê-la para o destino desejado baseado no arquivo de configuração, e nomeá-la usando seu hash md5; 
 
 Webpack é tão poderoso que quando você entender como ele funciona, poderá melhorar drasticamente seu fluxo de trabalho front-end. Sua principal desvantagem é a configuração excessiva e complexa; Mas com este guia você deve se capaz de encontrar solução para muitas questões comuns usando Webpack com Vue.js e `Vue-loader`.

docs/pt/SUMMARY.md

@@ -1,20 +1,22 @@
-* Começando
-  * [Especificação do Vue Component](start/spec.md)
-  * [Configurando um projeto](start/setup.md)
-* Características
-  * [ES2015](features/es2015.md)
-  * [CSS com Escopo](features/scoped-css.md)
-  * [Módulos CSS](features/css-modules.md)
-  * [PostCSS](features/postcss.md)
-  * [Hot Reload](features/hot-reload.md)
-* Configurações
-  * [Pré-Processadores](configurations/pre-processors.md)
-  * [Manipulação de URls de ativos](configurations/asset-url.md)
-  * [Configuração avançado do loader](configurations/advanced.md)
-  * [Extraindo arquivos css](configurations/extract-css.md)
-* Fluxo de trabalho
-  * [Produção](workflow/production.md)
-  * [Análise estática do código \(Linting\)](workflow/linting.md)
-  * [Testando](workflow/testing.md)
-  * [Testando com Mocks](workflow/testing-with-mocks.md)
-* [Referência de opções](options.md)
+- [Introdução](README.md)
+- Começando
+  - [Especificação do Vue Component](start/spec.md)
+  - [Configurando um projeto](start/setup.md)
+- Características
+  - [ES2015](features/es2015.md)
+  - [CSS com Escopo](features/scoped-css.md)
+  - [Módulos CSS](features/css-modules.md)
+  - [PostCSS](features/postcss.md)
+  - [Hot Reload](features/hot-reload.md)
+- Configurações
+  - [Pré-Processadores](configurations/pre-processors.md)
+  - [Manipulação de URls de ativos](configurations/asset-url.md)
+  - [Configuração avançado do loader](configurations/advanced.md)
+  - [Extraindo arquivos css](configurations/extract-css.md)
+  - [Blocos customizados](configurations/custom-blocks.md)
+- Fluxo de trabalho
+  - [Produção](workflow/production.md)
+  - [Análise estática do código \(Linting\)](workflow/linting.md)
+  - [Testando](workflow/testing.md)
+  - [Testando com Mocks](workflow/testing-with-mocks.md)
+- [Referência de opções](options.md)

docs/pt/configurations/advanced.md

@@ -1,54 +1,83 @@
 # Configurações avançadas do carregador
 
-Às vezes você pode querer aplicar um carregador de string a uma linguagem em vez de deixar `vue-loader` responsável. Ou você pode simplesmente querer sobrescrever a configuração embutida do carregador para a linguagem padrão. Para fazer isso, adicione um bloco `vue` em seu arquivo de configuração Webpack, e especifique a opção `loaders`.
+Às vezes você pode querer:
 
-### Webpack 1.x
+1. Aplicar um carregador personalizado de string a uma linguagem em vez de deixar `vue-loader` responsável. 
+
+2. Sobrescrever a configuração embutida do carregador para a linguagem padrão. 
+
+3. Pré-processar ou pós-processar um bloco de linguagem especifico com carregadores personalizado.
+
+Para fazer isto, especifique a opção `loaders` para `vue-loader`:
+
+> Observe que `preLoaders` e`postLoaders` são suportados apenas em verões >=10.3.0
+
+
+
+### Webpack 2.x
 
 ```js
 // webpack.config.js
 module.exports = {
   // outras opções...
   module: {
-    loaders: [
+    // module.rules é o mesmo que module.loaders em 1.x
+    rules : [
       {
         test: /\.vue$/,
-        loader: 'vue'
+        loader: 'vue-loader',
+        options: {
+          // `loaders` substituirá os carregadores padrões.
+          // A configuração a seguir fará com que todas as tags <script> sem 
+          // o atributo "lang" sejam carrega com coffee-loader
+          loaders: {
+            js: 'coffee-loader'
+          },
+          
+          // `preLoaders` são anexados antes dos carregadores padrões
+          // Você pode usar isso para pré-processar blocos de linguagem 
+          // - um caso de uso comum seria i18n em tempo de construção.
+          preLoaders: {
+            js: '/caminho/personalizado/para/carregador'
+          },
+          
+          // `postLoaders` são anexados após os carregadores padrões.
+          // 
+          // - Para `html`, o resultado retornado pelo carregador padrão
+          //   será compilado em código de função de renderização JavaScript.
+          //
+          // - Para `css`, o resultado será retornado por vue-style-loader
+          //   que não é particulamente útil em muitos casos. Usando um plugin
+          //   postcss será uma opção melhor.
+          postLoaders: {
+            html: 'babel-loader'
+          }
+        }
       }
     ]
-  },
-  // configurações vue-loader 
-  vue: {
-    // ... outras opções vue
-    loaders: {
-      // carrega todo <script> sem o atributo "lang" com coffee-loader
-      js: 'coffee',
-      // carrega <template> diretamente como string HTML, 
-      // canalizá-lo atravé de vue-html-loader primeiro
-      html: 'raw'
-    }
   }
 }
 ```
 
-### Webpack 2.x \(^2.1.0-beta.25\)
+### Webpack 1.x
 
 ```js
+// webpack.config.js
 module.exports = {
   // outras opções...
   module: {
-    // module.rules é o mesmo que module.loaders em 1.x
-    rules: [
+    loaders: [
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
-        // opções de vue-loader
-        options: {
-          loaders: {
-            // ...
-          }
-        }
+        loader: 'vue'
       }
     ]
+  },
+  // configurações vue-loader
+  vue: {
+    loaders: {
+      // mesmo que as regras de configurações acima
+    }
   }
 }
 ```

docs/pt/configurations/asset-url.md

@@ -18,6 +18,6 @@ Como `.png` não é um arquivo JavaScript, você precisará configurar o Webpack
 
 Os benefícios de tudo isso são:
 
-1. `file-loader` permite a você configurar onde copiar e colar os arquivos de ativos \(assets\), e como nomeá-lo usando hashes de versão para melhorar o cache. Mas, isso também significa que **você pode simplesmente colocar imagens ao lado de seus arquivos **`.vue`** e usar o caminho relativo com base na estrutura de pastas em vez de se preocupar com URLs de implantação**. Com a configuração apropriada, Webpack irá automaticamente escrever o caminho dos arquivos em URLs corretas na saída empacotada.
+1. `file-loader` permite a você configurar onde copiar e colar os arquivos de ativos \(assets\), e como nomeá-lo usando hashes de versão para melhorar o cache. Mas, isso também significa que **você pode simplesmente colocar imagens ao lado de seus arquivos `.vue` e usar o caminho relativo com base na estrutura de pastas em vez de se preocupar com URLs de implantação**. Com a configuração apropriada, Webpack irá automaticamente escrever o caminho dos arquivos em URLs corretas na saída empacotada.
 
 2. `url-loader` permite a você colocar condicionalmente em linha um arquivo de dados URL base64 se eles forem menor que um determinado limite. Se o arquivo for maior do que o limite ele automaticamente será jogado para `file-loader`.

docs/pt/configurations/custom-blocks.md

@@ -0,0 +1,67 @@
+# Blocos customizados
+
+> Requer versão 10.2.0+
+
+Você pode definir um bloco de linguagem customizado dentro de arquivos `*.vue`. O conteúdo do bloco customizado será processado por carregadores especificado na opção `loaders` do objeto de configuração `vue-loader` e então requerido pelo módulo componente. A configuração é semelhante a descrita em [Configurações Avançada do Carregador](../configurations/advanced.md). exceto o uso padrão do nome da tag em vez do atributo `lang`;
+
+Se for encontrado um carregador correspondente para um bloco customizado, ele será processado. Caso contrário o bloco customizado será simplesmente ignorado.
+
+## Exemplo
+
+Aqui está um exemplo de extração de todos os blocos customizados `<docs>` em um único arquivo docs;
+
+#### componente.vue
+
+``` html
+<docs>
+  ## Isto é um componente de exemplo.
+</docs>
+
+<template>
+  <h2 class="red">{{msg}}</h2>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Olá do Componente A!'
+    }
+  }
+}
+</script>
+
+<style>
+comp-a h2 {
+  color: #f00;
+}
+</style>
+```
+
+#### webpack.config.js
+
+``` js
+// Webpack 2.x
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue',
+        options: {
+          loaders: {
+            // extrai todo conteúdo de <docs> em texto bruto
+            'docs': ExtractTextPlugin.extract('raw-loader'),
+          }
+        }
+      }
+    ],
+    plugins: [
+      // saída de todos os docs em um único arquivo
+      new ExtractTextPlugin('docs.md')
+    ]
+  }
+}
+```