Skip to content
This repository has been archived by the owner on May 21, 2024. It is now read-only.

Commit

Permalink
feat(translations): 🌐 Finish get-started translation
Browse files Browse the repository at this point in the history
Finish Translation on get-started page of the docs  nuxt#1975
  • Loading branch information
felipe-heredia committed Jan 7, 2022
1 parent df662bd commit 1a9769f
Show file tree
Hide file tree
Showing 8 changed files with 72 additions and 66 deletions.
51 changes: 26 additions & 25 deletions content/pt-br/docs/1.get-started/1.installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Aqui, você vai encontrar informações sobre como configurar e iniciar um proje

## Online playground

Você pode divertir-se com o Nuxt de forma online, diretamente pelo CodeSandbox ou StackBlitz:
Você pode se divertir com o Nuxt de forma online, diretamente pelo CodeSandbox ou StackBlitz:
:app-button[Divertir-se no CodeSandbox]{href=https://codesandbox.io/s/github/nuxt/codesandbox-nuxt/tree/master/ size="small" externalIcon}
:app-button[Divertir-se no StackBlitz]{href=https://stackblitz.com/github/nuxt/starter/tree/stackblitz size="small" externalIcon}

Expand All @@ -31,37 +31,37 @@ Você pode divertir-se com o Nuxt de forma online, diretamente pelo CodeSandbox

Para iniciar rapidamente, você pode utilizar [create-nuxt-app](https://github.com/nuxt/create-nuxt-app).

Tenha certeza que você possui instalado o yarn, npx (incluido por padrão no npm v5.2+) ou npm (v6.1+).
Tenha certeza que você possui instalado o yarn, npx (incluído por padrão no npm v5.2+) ou npm (v6.1+).

::code-group

```bash [Yarn]
yarn create nuxt-app <project-name>
yarn create nuxt-app <nome-do-projeto>
```

```bash [NPX]
npx create-nuxt-app <project-name>
npx create-nuxt-app <nome-do-projeto>
```

```bash [NPM]
npm init nuxt-app <project-name>
npm init nuxt-app <nome-do-projeto>
```

::

O terminal irá fazer algumas perguntas (nome, opções do Nuxt, framework de UI, TypeScript, linter, framework de testes, etc). Para encontrar mais detalhes sobre todas essas opções veja a [documentação create-nuxt-app](https://github.com/nuxt/create-nuxt-app/blob/master/README.md).
O terminal irá fazer algumas perguntas (nome, opções do Nuxt, framework de UI, TypeScript, linter, framework de testes, etc). Para encontrar mais detalhes sobre todas essas opções veja a [documentação do create-nuxt-app](https://github.com/nuxt/create-nuxt-app/blob/master/README.md).

Uma vez que todas as questões foram respondidas, será instalada todas as dependências. O próximo passo é navegar para a pasta do projeto e inicia-lo:
Uma vez que todas as questões foram respondidas, todas as dependências serão instaladas. O próximo passo é navegar para a pasta do projeto e iniciá-lo:

::code-group

```bash [Yarn]
cd <project-name>
cd <nome-do-projeto>
yarn dev
```

```bash [NPM]
cd <project-name>
cd <nome-do-projeto>
npm run dev
```

Expand All @@ -81,22 +81,23 @@ Nós vamos usar o terminal para criar os diretórios e arquivos, sinta-se livre

### Configurando o seu projeto

Crie uma pasta vazia com o nome do seu projeto e navegue para dentro dele :
Crie uma pasta vazia com o nome do seu projeto e navegue para dentro dele:

```bash
mkdir <project-name>
cd <project-name>
mkdir <nome-do-projeto>

cd <nome-do-projeto>
```

_Substitua `<project-name>` com o nome do seu projeto._
_Substitua `<nome-do-projeto>` com o nome do seu projeto._

Crie o arquivo `package.json` :

```bash
touch package.json
```

Preencha o conteúdo do seu `package.json` com :
Preencha o conteúdo do seu `package.json` com:

```json{}[package.json]
{
Expand All @@ -112,7 +113,7 @@ Preencha o conteúdo do seu `package.json` com :

`scripts` define os comandos do Nuxt que serão executados com o comando `npm run <command>` ou `yarn <command>`.

#### **O que é o arquivo package.json ?**
#### **O que é o arquivo package.json?**

O arquivo `package.json` é como o documento de identificação do seu projeto. Ele irá conter todas as dependências do projeto e muito mais. Se você não sabe o que é o arquivo `package.json`, nós recomendamos imensamente a leitura da documentação do [npm](https://docs.npmjs.com/creating-a-package-json-file).

Expand All @@ -132,7 +133,7 @@ npm install nuxt

::

Esse comando vai adicionar `nuxt` como uma dependência para o seu projeto e vai adiciona-lo no seu `package.json`. A pasta `node_modules` também será criada, é aonde todos os seus pacotes instalados e dependencias serão salvas.
Esse comando vai adicionar `nuxt` como uma dependência para o seu projeto e vai adicioná-lo no seu `package.json`. A pasta `node_modules` também será criada, é aonde todos os seus pacotes instalados e dependências serão salvas.

::alert{type="info"}

Expand All @@ -144,31 +145,31 @@ Um arquivo `yarn.lock` ou `package-lock.json` também será criado, o qual garan

Nuxt transforma todos arquivos `*.vue` dentro da pasta `pages` em rotas para a aplicação.

Crie a pasta `pages` dentro do seu projeto :
Crie a pasta `pages` dentro do seu projeto:

```bash
mkdir pages
```

Então, crie um arquivo `index.vue` dentro da pasta `pages` :
Então, crie um arquivo `index.vue` dentro da pasta `pages`:

```bash
touch pages/index.vue
```

É importante que essa página seja nomeada `index.vue` dessa forma ela será a página principal que o Nuxt irá mostrar quando a aplicação abrir.

Abra o arquivo `index.vue` no seu editor e adicione o seguinte conteúdo :
Abra o arquivo `index.vue` no seu editor e adicione o seguinte conteúdo:

```html{}[pages/index.vue]
<template>
<h1>Hello world!</h1>
<h1>Olá mundo!</h1>
</template>
```

### Iniciando o projeto

Inicie o seu projeto executando um dos seguintes comandos abaixo :
Inicie o seu projeto executando um dos seguintes comandos abaixo:

::code-group

Expand All @@ -190,7 +191,7 @@ Nós usamos o comando dev quando iniciamos a nossa aplicação no modo de desenv

A aplicação está agora rodando em **[http://localhost:3000](http://localhost:3000/)**.

Abra no seu navegador clicando no link do seu terminal e você deverá ver o texto "Hello world!"
Abra no seu navegador clicando no link do seu terminal e você deverá ver o texto "Olá mundo!"
que nós copiamos no passo anterior.

::alert{type="info"}
Expand All @@ -202,17 +203,17 @@ Quando iniciado o Nuxt no modo de desenvolvimento, ele estará escutando por mud
::alert{type="warning"}

Quando você rodar o comando dev será criado uma pasta chamada `.nuxt`. Essa pasta deve ser ignorada
pelo controle de versionamento. Você ignorar arquivos criando um arquivo `.gitignore` na raiz do projeto e adicionando .nuxt ao arquivo.
pelo controle de versionamento. Você pode ignorar arquivos criando um arquivo `.gitignore` na raiz do projeto e adicionando .nuxt ao arquivo.

::

### Passo extra

Crie uma pagina chamada `fun.vue` dentro da pasta `pages`.
Crie uma página chamada `fun.vue` dentro da pasta `pages`.

Adicione um `<template></template>` e inclua um cabeçalho com uma frase engraçada dentro.

Então, vá até o seu navegador e veja a sua nova página em **[localhost:3000/fun](http://localhost:3000/fun)**.
Então, vá até o seu navegador e veja a sua nova página em **[http://localhost:3000/fun](http://localhost:3000/fun)**.

::alert{type="info"}

Expand Down
11 changes: 7 additions & 4 deletions content/pt-br/docs/1.get-started/2.routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@ A maioria dos sites possuem mais que uma página. Por exemplo uma página inicia

## Rotas automáticas

A maioria dos websites irão ter mais que uma página (por exemplo página inicial, página sobre, formas de contato etc.). Para mostrar essas paginas nós precisamos de um Router. É aonde o `vue-router` entra. Quando se trabalha com aplicações Vue, você tem que iniciar o arquivo de configuraçào (exemplo `router.js`) e adicionar todas as rotas manualmente nele.
Nuxt gera automáticamente as configurações do `vue-router` para você, baseando-se nos arquivos Vue dentro da pasta `pages`. Isso significa que você nunca mais terá que escrever as configurações do router! Nuxt também te dá code-splitting automático para todas as suas rotas.
A maioria dos websites irão ter mais que uma página. Para mostrar essas páginas nós precisamos de um Router. É aonde o `vue-router` entra. Quando se trabalha com aplicações Vue, você tem que iniciar o arquivo de configuração (exemplo `router.js`) e adicionar todas as rotas manualmente nele.

O Nuxt gera automaticamente as configurações do `vue-router` para você, baseando-se nos arquivos Vue dentro da pasta `pages`. Isso significa que você nunca mais terá que escrever as configurações do router! Nuxt também te dá code-splitting automático para todas as suas rotas.

Em outras palavras, tudo que você tem que fazer para ter uma rota na sua aplicação é criar arquivos `.vue` dentro da pasta `pages`.

Expand All @@ -25,7 +26,7 @@ Aprenda mais sobre [Roteamento](/docs/features/file-system-routing)

## Navegação

Para navegar entre as páginas do seu app, você deve usar o componente [NuxtLink](/docs/features/nuxt-components#the-nuxtlink-component). Esse componente está incluido no Nuxt, portanto você não tem que importa-lo como você faz com os outros componentes. É igual a tag HTML `<a>`, exceto que ao invés de usarmos uma `href="/about"` nós usamos `to="/about"`. Se você já usou `vue-router` antes, você pode imaginar que o `<NuxtLink>` é uma substituiçào do `<RouterLink>`.
Para navegar entre as páginas do seu app, você deve usar o componente [NuxtLink](/docs/features/nuxt-components#the-nuxtlink-component). Esse componente está incluído no Nuxt, portanto você não tem que importá-lo como você faz com os outros componentes. É igual a tag HTML `<a>`, exceto que ao invés de usarmos uma `href="/about"` nós usamos `to="/about"`. Se você já usou `vue-router` antes, você pode imaginar que o `<NuxtLink>` é uma substituição do `<RouterLink>`.

Um simples link para a página `index.vue` dentro da sua pasta `pages`:

Expand All @@ -41,9 +42,11 @@ Para todas as páginas de dentro do seu site, use `<NuxtLink>`. Se você tem lin
<template>
<main>
<h1>Página Inicial</h1>
<NuxtLink to="/about">
Sobre (link interno que pertence ao App Nuxt)
Sobre (link interno)
</NuxtLink>
<a href="https://nuxtjs.org">Link externo para outra página</a>
</main>
</template>
Expand Down
13 changes: 7 additions & 6 deletions content/pt-br/docs/1.get-started/3.directory-structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ mkdir components assets static
touch nuxt.config.js
```

Essas são as pastas e os arquivos princiais que nós usamos quando construímos uma aplicação Nuxt. Você vai encontrar uma explicação para cada um deles abaixo.
Essas são as pastas e os arquivos principais que nós usamos quando construímos uma aplicação Nuxt. Você vai encontrar uma explicação para cada um deles abaixo.

::alert{type="info"}

Expand All @@ -42,9 +42,10 @@ Aprender mais sobre a [pasta pages](/docs/directory-structure/pages)

A pasta `components` é aonde você vai colocar todos os seus componentes Vue.js os quais serão importados dentro das suas páginas.

Com Nuxt você pode criar os seus componentes e auto importa-los
dentro dos seus arquivos .vue, significando que não é mais necessário importalos manualmente na seção script.
Nuxt vai escanear e auto importa-los para você uma vez que "components" é setado como "true".
Com Nuxt você pode criar os seus componentes e importá-los automaticamente
dentro dos seus arquivos .vue, significando que não é mais necessário importá-los manualmente na sessão script.

A Nuxt fará a varredura e a importação automática destes para você, uma vez que você tenha os componentes configurados como "true"

::alert{type="next"}
Aprenda mais sobre a [pasta components](/docs/directory-structure/components)
Expand All @@ -68,15 +69,15 @@ Aprenda mais sobre a [pasta static](/docs/directory-structure/static)

### O arquivo nuxt.config.js

O arquivo `nuxt.config.js` é o unico ponto de configuração para o Nuxt. Se você quiser adicionar módulos ou sobrescrever as configurações padrão, esse é o lugar para aplicar as mudanças.
O arquivo `nuxt.config.js` é o único ponto de configuração para o Nuxt. Se você quiser adicionar módulos ou sobrescrever as configurações padrão, esse é o lugar para aplicar as mudanças.

::alert{type="next"}
Aprenda mais sobre o [arquivo nuxt.config.js](/docs/directory-structure/nuxt-config)
::

### O arquivo package.json

O aquivo `package.json` contém todas as dependências e scripts para a sua aplicação.
O arquivo `package.json` contém todas as dependências e scripts para a sua aplicação.

## Mais sobre a estrutura do projeto

Expand Down
38 changes: 19 additions & 19 deletions content/pt-br/docs/1.get-started/4.commands.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: Comandos e Deployment
description: Nuxt vem com um set de comandos úteis, tanto para propósitos de desenvolvimento como para produção.
title: Comandos e Deploy
description: Nuxt vem com um conjunto de comandos úteis, tanto para propósitos de desenvolvimento como para produção.
category: get-started
video: hYdXzIGDlYA
---

# Comandos e deployment

Nuxt vem com um set de comandos úteis, tanto para propósitos de desenvolvimento como para produção
Nuxt vem com um conjunto de comandos úteis, tanto para propósitos de desenvolvimento como para produção.

---

Expand All @@ -24,7 +24,7 @@ Você deve ter esses comandos no seu `package.json`:
}
```

Você pode iniciar os seus via `yarn <command>`ou `npm run <command>` (exemplo: `yarn dev` / `npm run dev`).
Você pode iniciar os seus comandos via `yarn <command>` ou `npm run <command>` (exemplo: `yarn dev`/`npm run dev`).

## Ambiente de desenvolvimento

Expand All @@ -50,24 +50,24 @@ Você pode iniciar diferentes comandos dependendo do [target](/docs/features/dep

- **nuxt dev** - Inicia o servidor de desenvolvimento.
- **nuxt build** - Constrói e otimiza a sua aplicação com webpack para produção.
- **nuxt start** - Inicia o servidor de produção (depois de rodar `nuxt build`). Use-o para o Node.js hospedar como Heroku, Digital Ocean, etc.
- **nuxt start** - Inicia o servidor de produção (depois de rodar `nuxt build`). Use-o para rodar Node.js em locais como Heroku, Digital Ocean, etc.

### target: `static`

- **nuxt dev** - Inicia o servidor de desenvolvimento.
- **nuxt generate** - Constrói a aplicação (se necessário), gera todas as rotas como um arquivo HTML e exporta para a pasta `dist/` (usado para hospedagem estática).
- ** nuxt start ** - sirva o diretório `dist/` como sua hospedagem estática faria (Netlify, Vercel, Surge, etc), ótimo para testar antes do deploy.
- **nuxt start** - Serve o diretório `dist/` como sua hospedagem estática deve fazer (Netlify, Vercel, Surge, etc), ótimo para testar antes do deploy.

## Inspeção da configuração do Webpack

Você pode inspecionar a configuração do webpack usada pelo Nuxt para montar o projeto (similar ao [vue inspect](https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config)).

- **nuxt webpack [query...]**

**Arguments:**
**Argumentos:**

- `--name`: Nome do pacote a ser inspecionado. (client, server, modern)
- `--dev`: Inspecione a configuração do webpack para modo de desenvolvimento
- `--dev`: Inspeciona a configuração do webpack para modo de desenvolvimento
- `--depth`: Inspeção profunda. O padrão é 2 para evitar a saída detalhada.
- `--no-colors`: Desativar cores ANSI (desativado por padrão quando o TTY não está disponível ou quando redirecionando para um arquivo)

Expand All @@ -83,13 +83,13 @@ Você pode inspecionar a configuração do webpack usada pelo Nuxt para montar o
- `nuxt webpack module rules loader=vue-`
- `nuxt webpack module rules "loader=.*-loader"`

## Deployment de produção
## Deploy em produção

Nuxt deixa você escolher entre deployment para servidor ou estático.
Nuxt deixa você escolher entre deploy para servidor ou estático.

### Deployment para servidor
### Deploy para servidor

Para Deployment da aplicação SSR nós usamos `target: 'server'`, aonde server é o valor padrão.
Para fazer o deploy da aplicação SSR nós usamos `target: 'server'`, aonde server é o valor padrão.

::code-group

Expand All @@ -103,7 +103,7 @@ npm run build

::

Nuxt vai criar uma pasta `.nuxt` com tudo dentro pronto para ser hospedado no seu server.
Nuxt vai criar uma pasta `.nuxt` com tudo dentro pronto para ser hospedado no seu servidor.

::alert{type="info"}
Nós recomendamos colocar `.nuxt` no `.npmignore` ou `.gitignore`.
Expand All @@ -123,11 +123,11 @@ npm run start

::

### Deployment estático (Pre-renderizado)
### Deploy estático (Pre-renderizado)

Nuxt dá a habilidade de hospedar o seu site em qualquer site de hospedagem estática.

Para deployar um site estático, tenha certeza que você tem `target: 'static'` no seu `nuxt.config.js` (para Nuxt >= 2.13):
Para fazer o deploy de um site estático, tenha certeza que você tem `target: 'static'` no seu `nuxt.config.js` (para Nuxt >= 2.13):

```js{}[nuxt.config.js]
export default {
Expand All @@ -152,14 +152,14 @@ Nuxt vai criar uma pasta `.nuxt` com tudo dentro pronto para ser hospedado no se
A partir do Nuxt v2.13, há um crawler instalado que agora rastreará suas tags de link e gerará suas rotas ao usar o comando `nuxt generate` com base nesses links.

::alert{type="warning"}
**Warning:** Rotas dinâmicas são ignoradas pelo comando `generate` ao usar Nuxt <= v2.12: [API Configuration generate](/docs/configuration-glossary/configuration-generate)
**Aviso:** Rotas dinâmicas são ignoradas pelo comando `generate` ao usar Nuxt <= v2.12: [API Configuration generate](/docs/configuration-glossary/configuration-generate)
::

::alert{type="info"}
Ao gerar a sua aplicação web com `nuxt generate`, [o contexto](/docs/internals-glossary/context) given to [asyncData](/docs/features/data-fetching#async-data) e [fetch](/docs/features/data-fetching#the-fetch-hook) não terá `req` e `res`.
::

#### **Falha em erro**
#### **Falha no erro**

Para retornar um código de status diferente de zero quando um erro de página for encontrado e permitir que o CI/CD falhe no deploy ou compilação, você pode usar o argumento `--fail-on-error`.

Expand All @@ -175,8 +175,8 @@ npm run generate --fail-on-error

::

## Qual é o próximo ?
## O que vem a seguir?

::alert{type="next"}
Leia o [Guia de Deployment](/deployments) para encontrar exemplos de implantações em hosts populares.
Leia o [Guia de Deploy](/deployments) para encontrar exemplos de implantações em hosts populares.
::
6 changes: 3 additions & 3 deletions content/pt-br/docs/1.get-started/5.conclusion.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Parabéns você acabou de criar a sua primeira aplicação Nuxt e v
category: get-started
---

# Conclusion
# Conclusão

Parabéns você acabou de criar a sua primeira aplicação Nuxt e você agora deve se considerar um Nuxter. Mais existe ainda muita coisa para aprender e muito mais que você pode fazer com o Nuxt. Aqui temos algumas recomendações.

Expand All @@ -19,9 +19,9 @@ Trabalhando com [asyncData](/docs/features/data-fetching#async-data)
::

::alert{type="next"}
Escolhendo entre os diferentes [modos de Rendering](/docs/features/rendering-modes)
Escolhendo entre os diferentes [modos de renderização](/docs/features/rendering-modes)
::

::alert{type="star"}
Você têm gostado do Nuxt? não se esqueça de dar uma [estrela no nosso projeto](https://github.com/nuxt/nuxt.js) on GitHub
Você têm gostado do Nuxt? Não se esqueça de dar uma [estrela no nosso projeto](https://github.com/nuxt/nuxt.js) no GitHub
::
Loading

0 comments on commit 1a9769f

Please sign in to comment.