Skip to content

[docs] Minor fixes and updates #643

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 14, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 13 additions & 12 deletions docs/pt/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
42 changes: 22 additions & 20 deletions docs/pt/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -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)
79 changes: 54 additions & 25 deletions docs/pt/configurations/advanced.md
Original file line number Diff line number Diff line change
@@ -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
}
}
}
```
Expand Down
2 changes: 1 addition & 1 deletion docs/pt/configurations/asset-url.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
67 changes: 67 additions & 0 deletions docs/pt/configurations/custom-blocks.md
Original file line number Diff line number Diff line change
@@ -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')
]
}
}
```
Loading