diff --git a/src/.vuepress/components/guide/contributing/translations-data.js b/src/.vuepress/components/guide/contributing/translations-data.js index aef5d0ef29..8af1716f67 100644 --- a/src/.vuepress/components/guide/contributing/translations-data.js +++ b/src/.vuepress/components/guide/contributing/translations-data.js @@ -1,11 +1,11 @@ export const labels = { - language: 'Language', + language: 'Linguagem', github: 'GitHub', - lastCommit: 'Last commit', - last90Days: 'Last 90 days', - loadDetails: 'Load Details', + lastCommit: 'Último commit', + last90Days: 'Últimos 90 dias', + loadDetails: 'Carregar Detalhes', commits: 'commits', - loading: 'Loading...' + loading: 'Carregando...' } // Repos are in alphabetical order by the language code diff --git a/src/.vuepress/components/search/index.vue b/src/.vuepress/components/search/index.vue index 170154c488..22363e37b8 100644 --- a/src/.vuepress/components/search/index.vue +++ b/src/.vuepress/components/search/index.vue @@ -2,7 +2,7 @@

- This search page is not available at the moment, please use the search box in the top navigation bar. + Esta página de pesquisa não está disponível no momento, use a caixa de pesquisa na barra de navegação superior.

-

No results found for query "".

+

Nenhum resultado encontrado para o termo "".

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index b2cb8dcef7..de919d024d 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -433,11 +433,11 @@ module.exports = { items: [ { text: 'Doações Únicas', - link: '/support-vuejs/#one-time-donations' + link: '/support-vuejs/#doacoes-unicas' }, { text: 'Ajuda Recorrente', - link: '/support-vuejs/#recurring-pledges' + link: '/support-vuejs/#doacoes-recorrentes' }, { text: 'Loja de Camisetas', @@ -477,7 +477,7 @@ module.exports = { }, { text: 'Mais Traduções', - link: '/guide/contributing/translations#community-translations' + link: '/guide/contributing/translations#traducoes-da-comunidade' } ] } diff --git a/src/.vuepress/public/images/lifecycle.svg b/src/.vuepress/public/images/lifecycle.svg index ebde4c262f..6c6147f024 100644 --- a/src/.vuepress/public/images/lifecycle.svg +++ b/src/.vuepress/public/images/lifecycle.svg @@ -3,7 +3,7 @@ - app = Vue.createApp(options) + app = Vue.createApp(opções) app.mount(el) @@ -12,8 +12,8 @@ - Init - events & lifecycle + Inicia + eventos & ciclo de vida @@ -24,8 +24,8 @@ - Init - injections & reactivity + Inicia + injeções & reatividade @@ -36,21 +36,21 @@ - Has - “template” - option? - YES - NO + Tem + opção + “template”? + SIM + NÃO - Compile template - into render function * + Compila template + pra função de renderização * - Compile el’s innerHTML - as template * + Compila innerHTML do el + como template * @@ -62,8 +62,8 @@ - Create app.$el and - append it to el + Cria app.$el e + adiciona ao el @@ -91,24 +91,24 @@ - Virtual DOM - re-rendered - and patch + DOM Virtual + re-renderizado + e corrigido - when data - changes + quando dados + mudam - Mounted + Montado - when + quando app.unmount() - is called + é chamado @@ -126,10 +126,10 @@ - Unmounted + Desmontado - * Template compilation is performed ahead-of-time if using - a build step, e.g., with single-file components. + * A compilação do template é realizada antecipadamente se estiver usando + uma etapa de construção, por exemplo, com componentes single-file. diff --git a/src/.vuepress/public/manifest.json b/src/.vuepress/public/manifest.json index d4843777bd..76ebaadb9f 100644 --- a/src/.vuepress/public/manifest.json +++ b/src/.vuepress/public/manifest.json @@ -4,7 +4,7 @@ "start_url": ".", "display": "standalone", "background_color": "#3eaf7c", - "description": "Vue.js framework documentation", + "description": "Documentação do framework Vue.js", "icons": [ { "src": "images/icons/android-icon-48x48.png", diff --git a/src/.vuepress/theme/layouts/404.vue b/src/.vuepress/theme/layouts/404.vue index 915deb1d51..d7284275fc 100644 --- a/src/.vuepress/theme/layouts/404.vue +++ b/src/.vuepress/theme/layouts/404.vue @@ -4,15 +4,15 @@

404

-

Whoops! This page doesn't exist.

+

Opa! Esta página não existe.

- New pages are added to the documentation all the time. This page might not be included in all of the translations yet. + Novas páginas são adicionadas à documentação o tempo todo. Esta página pode não estar incluída em todas as traduções ainda.

- Take me home. + Me leve para home. diff --git a/src/api/effect-scope.md b/src/api/effect-scope.md index f154162eee..f004210221 100644 --- a/src/api/effect-scope.md +++ b/src/api/effect-scope.md @@ -1,25 +1,25 @@ -# Effect Scope API +# API do Escopo de Efeito :::info -Effect scope is an advanced API primarily intended for library authors. For details on how to leverage this API, please consult its corresponding [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md). +Escopo de efeito é uma API avançada destinada principalmente a autores de bibliotecas. Para obter detalhes sobre como aproveitar essa API, consulte o [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md) correspondente. ::: ## `effectScope` -Creates an effect scope object which can capture the reactive effects (e.g. computed and watchers) created within it so that these effects can be disposed together. +Cria um objeto de escopo de efeito que pode capturar os efeitos reativos (por exemplo, computados e observadores) criados dentro dele para que esses efeitos possam ser descartados juntos. -**Typing:** +**Tipando:** ```ts function effectScope(detached?: boolean): EffectScope interface EffectScope { - run(fn: () => T): T | undefined // undefined if scope is inactive + run(fn: () => T): T | undefined // indefinido se o escopo estiver inativo stop(): void } ``` -**Example:** +**Exemplo:** ```js const scope = effectScope() @@ -29,18 +29,18 @@ scope.run(() => { watch(doubled, () => console.log(doubled.value)) - watchEffect(() => console.log('Count: ', doubled.value)) + watchEffect(() => console.log('Contagem: ', doubled.value)) }) -// to dispose all effects in the scope +// para descartar todos os efeitos no escopo scope.stop() ``` ## `getCurrentScope` -Returns the current active [effect scope](#effectscope) if there is one. +Retorna o [escopo de efeito](#effectscope) atualmente ativo se houver um. -**Typing:** +**Tipando:** ```ts function getCurrentScope(): EffectScope | undefined @@ -48,11 +48,11 @@ function getCurrentScope(): EffectScope | undefined ## `onScopeDispose` -Registers a dispose callback on the current active [effect scope](#effectscope). The callback will be invoked when the associated effect scope is stopped. +Registra um _callback_ de descarte no [escopo de efeito](#effectscope) atualmente ativo. O _callback_ será invocado quando o escopo de efeito associado for interrompido. -This method can be used as a non-component-coupled replacement of `onUnmounted` in reusable composition functions, since each Vue component's `setup()` function is also invoked in an effect scope. +Este método pode ser usado como um substituto de `onUnmounted` "não acoplado a componentes" em funções de composição reutilizáveis, uma vez que a função `setup()` de cada componente Vue também é invocada em um escopo de efeito. -**Typing:** +**Tipando:** ```ts function onScopeDispose(fn: () => void): void diff --git a/src/api/index.md b/src/api/index.md index 8daef5458a..e975fabedf 100644 --- a/src/api/index.md +++ b/src/api/index.md @@ -1,15 +1,15 @@ # API -The Vue.js API contains the following categories: +A API do Vue.js contém as seguintes categorias: -- [Application Config](/api/application-config.html) -- [Application API](/api/application-api.html) -- [Global API](/api/global-api.html) -- [Options API](/api/options-api.html) -- [Instance Properties](/api/instance-properties.html) -- [Instance Methods](/api/instance-methods.html) -- [Directives](/api/directives.html) -- [Special Attributes](/api/special-attributes.html) -- [Built-in Components](/api/built-in-components.html) -- [Reactivity API](/api/reactivity-api.html) -- [Composition API](/api/composition-api.html) +- [Configuração da Aplicação](/api/application-config.html) +- [API da Aplicação](/api/application-api.html) +- [API Global](/api/global-api.html) +- [API de Opções](/api/options-api.html) +- [Propriedades da Instância](/api/instance-properties.html) +- [Métodos de Instância](/api/instance-methods.html) +- [Diretivas](/api/directives.html) +- [Atributos Especiais](/api/special-attributes.html) +- [Componentes Integrados](/api/built-in-components.html) +- [API de Reatividade](/api/reactivity-api.html) +- [API de Composição](/api/composition-api.html) diff --git a/src/api/reactivity-api.md b/src/api/reactivity-api.md index b86d6ffead..2d265c3c70 100644 --- a/src/api/reactivity-api.md +++ b/src/api/reactivity-api.md @@ -1,8 +1,8 @@ -# Reactivity API +# API de Reatividade -The Reactivity API contains the following sections: +A API de Reatividade contém as seguintes seções: -- [Basic Reactivity APIs](/api/basic-reactivity.html) +- [API's Básicas de Reatividade](/api/basic-reactivity.html) - [Refs](/api/refs-api.html) -- [Computed and watch](/api/computed-watch-api.html) -- [Effect Scope API](/api/effect-scope.html) \ No newline at end of file +- [Dados Computados e Observadores](/api/computed-watch-api.html) +- [API do Escopo de Efeito](/api/effect-scope.html) \ No newline at end of file diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md index fcf0462278..55bdf52426 100644 --- a/src/api/sfc-script-setup.md +++ b/src/api/sfc-script-setup.md @@ -2,37 +2,37 @@ sidebarDepth: 1 --- -# SFC ` ``` -The code inside is compiled as the content of the component's `setup()` function. This means that unlike normal ` ``` -## Reactivity +## Reatividade -Reactive state needs to be explicitly created using [Reactivity APIs](/api/basic-reactivity.html). Similar to values returned from a `setup()` function, refs are automatically unwrapped when referenced in templates: +O estado reativo precisa ser criado explicitamente usando [APIs de Reatividade](/api/basic-reactivity.html). Semelhante aos valores retornados de uma função `setup()`, refs são automaticamente desempacotados quando referenciados em _templates_: ```vue ``` ```html ``` -## `defineProps` and `defineEmits` +## `defineProps` e `defineEmits` -To declare `props` and `emits` in ` ``` -- `defineProps` and `defineEmits` are **compiler macros** only usable inside ` ``` -When a parent gets an instance of this component via template refs, the retrieved instance will be of the shape `{ a: number, b: number }` (refs are automatically unwrapped just like on normal instances). +Quando um pai obtém uma instância deste componente via refs de _template_, a instância recuperada terá a forma `{ a: number, b: number }` (refs são automaticamente desempacotadas como em instâncias normais). -## `useSlots` and `useAttrs` +## `useSlots` e `useAttrs` -Usage of `slots` and `attrs` inside ` ``` -`useSlots` and `useAttrs` are actual runtime functions that return the equivalent of `setupContext.slots` and `setupContext.attrs`. They can be used in normal composition API functions as well. +`useSlots` e `useAttrs` são funções de tempo de execução reais que retornam o equivalente de `setupContext.slots` e `setupContext.attrs`. Eles também podem ser usados ​​em funções de API de composição normal. -## Usage alongside normal ` ``` -:::warning -`render` function is not supported in this scenario. Please use one normal ` ``` -In addition, the awaited expression will be automatically compiled in a format that preserves the current component instance context after the `await`. +Além disso, a expressão aguardada será compilada automaticamente em um formato que preserva o contexto da instância do componente atual após o `await`. -:::warning Note -`async setup()` must be used in combination with `Suspense`, which is currently still an experimental feature. We plan to finalize and document it in a future release - but if you are curious now, you can refer to its [tests](https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/__tests__/components/Suspense.spec.ts) to see how it works. +:::warning Nota +`async setup()` deve ser usado em combinação com `Suspense`, que atualmente ainda é um recurso experimental. Planejamos finalizá-lo e documentá-lo em uma versão futura - mas se você estiver curioso agora, pode consultar seus [testes](https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/__tests__/components/Suspense.spec.ts) para ver como funciona. ::: -## TypeScript-only Features +## Recursos somente do TypeScript -### Additional type exports +### Exportações de tipos adicionais -As noted above, in order to export additional types from an SFC, they must be moved to an additional ` ``` -### Type-only props/emit declarations +### Declarando somente o tipo de props/emits -Props and emits can also be declared using pure-type syntax by passing a literal type argument to `defineProps` or `defineEmits`: +Props e emits também podem ser declarados usando sintaxe de tipo puro passando um argumento de tipo literal para `defineProps` ou `defineEmits`: ```ts const props = defineProps<{ @@ -298,26 +298,26 @@ const emit = defineEmits<{ }>() ``` -- `defineProps` or `defineEmits` can only use either runtime declaration OR type declaration. Using both at the same time will result in a compile error. +- `defineProps` ou `defineEmits` só podem usar declaração de tempo de execução OU declaração de tipo. Usar ambos ao mesmo tempo resultará em um erro de compilação. -- When using type declaration, the equivalent runtime declaration is automatically generated from static analysis to remove the need for double declaration and still ensure correct runtime behavior. +- Ao usar a declaração de tipo, a declaração de tempo de execução equivalente é gerada automaticamente a partir da análise estática para eliminar a necessidade de declaração dupla e ainda garantir o comportamento correto em tempo de execução. - - In dev mode, the compiler will try to infer corresponding runtime validation from the types. For example here `foo: String` is inferred from the `foo: string` type. If the type is a reference to an imported type, the inferred result will be `foo: null` (equal to `any` type) since the compiler does not have information of external files. + - No modo dev, o compilador tentará inferir a validação em tempo de execução correspondente dos tipos. Por exemplo, aqui `foo: String` é inferido do tipo `foo: string`. Se o tipo for uma referência a um tipo importado, o resultado inferido será `foo: null` (igual ao tipo `any`) já que o compilador não possui informações de arquivos externos. - - In prod mode, the compiler will generate the array format declaration to reduce bundle size (the props here will be compiled into `['foo', 'bar']`) + - No modo de produção, o compilador gerará a declaração de formato de array para reduzir o tamanho do pacote (as props aqui serão compiladas em `['foo', 'bar']`) - - The emitted code is still TypeScript with valid typing, which can be further processed by other tools. + - O código emitido ainda é TypeScript com tipagem válida, podendo ser posteriormente processado por outras ferramentas. -- As of now, the type declaration argument must be one of the following to ensure correct static analysis: +- A partir de agora, o argumento de declaração de tipo deve ser um dos seguintes para garantir a análise estática correta: - - A type literal - - A reference to an interface or a type literal in the same file + - Um literal de tipo + - Uma referência a uma interface ou um literal de tipo no mesmo arquivo - Currently complex types and type imports from other files are not supported. It is theoretically possible to support type imports in the future. + Atualmente, tipos complexos e importações de tipos de outros arquivos não são suportados. É teoricamente possível suportar importações de tipo no futuro. -### Default props values when using type declaration +### Valores padrão de props ao usar declaração de tipo -One drawback of the type-only `defineProps` declaration is that it doesn't have a way to provide default values for the props. To resolve this problem, a `withDefaults` compiler macro is also provided: +Uma desvantagem da declaração `defineProps` somente de tipo é que ela não tem uma maneira de fornecer valores padrão para as props. Para resolver este problema, uma macro do compilador `withDefaults` também é fornecida: ```ts interface Props { @@ -326,13 +326,13 @@ interface Props { } const props = withDefaults(defineProps(), { - msg: 'hello', - labels: () => ['one', 'two'] + msg: 'olá', + labels: () => ['um', 'dois'] }) ``` -This will be compiled to equivalent runtime props `default` options. In addition, the `withDefaults` helper provides type checks for the default values, and ensures the returned `props` type has the optional flags removed for properties that do have default values declared. +Isso será compilado para as opções `default` de props equivalentes em tempo de execução. Além disso, o auxiliar `withDefaults` fornece verificações de tipo para os valores padrão e garante que o tipo `props` retornado tenha os sinalizadores opcionais removidos para propriedades que possuem valores padrão declarados. -## Restriction: No Src Imports +## Restrição: Nenhuma Importação Src -Due to the difference in module execution semantics, code inside ` ``` -`lang` can be applied to any block - for example we can use ` ``` -Note the intergration with pre-processors may differ based on the toolchain. Check out the respective documentations for examples: +Observe que a integração com pré-processadores pode diferir com base na cadeia de ferramentas. Confira as respectivas documentações para exemplos: - [Vite](https://vitejs.dev/guide/features.html#css-pre-processors) - [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors) - [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors) -## Src Imports +## Importações Src -If you prefer splitting up your `*.vue` components into multiple files, you can use the `src` attribute to import an external file for a language block: +Se preferir dividir seus componentes `*.vue` em vários arquivos, você pode usar o atributo `src` para importar um arquivo externo para um bloco de languagem: ```vue @@ -117,23 +117,23 @@ If you prefer splitting up your `*.vue` components into multiple files, you can ``` -Beware that `src` imports follow the same path resolution rules as webpack module requests, which means: +Esteja ciente de que as importações `src` seguem as mesmas regras de resolução de caminho que as solicitações do módulo webpack, o que significa: -- Relative paths need to start with `./` -- You can import resources from npm dependencies: +- Caminhos relativos precisam começar com `./` +- Você pode importar recursos das dependências npm: ```vue - + ``` -Into the following: +No seguinte: ```vue ``` -### Child Component Root Elements +### Elementos-raiz de Componente Filho -With `scoped`, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes. +Com `scoped`, os estilos do componente pai não vazarão para os componentes filhos. No entanto, o nó raiz de um componente filho será afetado pelo CSS com escopo do pai e pelo CSS com escopo do filho. Isso ocorre por design para que o pai possa estilizar o elemento raiz filho para fins de layout. -### Deep Selectors +### Seletores Profundos -If you want a selector in `scoped` styles to be "deep", i.e. affecting child components, you can use the `:deep()` pseudo-class: +Se você quiser que um seletor em estilos `scoped` seja "profundo", ou seja, afetando componentes filhos, você pode usar a pseudo-classe `:deep()`: ```vue ``` -The above will be compiled into: +O acima será compilado em: ```css .a[data-v-f3f3eg9] .b { @@ -58,13 +58,13 @@ The above will be compiled into: } ``` -:::tip -DOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors. +:::tip Dica +O conteúdo do DOM criado com `v-html` não é afetado por estilos com escopo, mas você ainda pode estilizá-los usando seletores profundos. ::: -### Slotted Selectors +### Seletores _Slotted_ -By default, scoped styles do not affect contents rendered by ``, as they are considered to be owned by the parent component passing them in. To explicitly target slot content, use the `:slotted` pseudo-class: +Por padrão, os estilos com escopo não afetam o conteúdo renderizado por ``, pois são considerados de propriedade do componente pai que os transmite. Para mirar explicitamente o conteúdo do slot, use a pseudoclasse `:slotted`: ```vue ``` -### Global Selectors +### Seletores Globais -If you want just one rule to apply globally, you can use the `:global` pseudo-class rather than creating another ` ``` -### Mixing Local and Global Styles +### Misturando Estilos Locais e Globais -You can also include both scoped and non-scoped styles in the same component: +Você também pode incluir estilos com e sem escopo no mesmo componente: ```vue ``` -### Scoped Style Tips +### Dicas para Estilo com Escopo -- **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit. +- **Estilos com escopo não eliminam a necessidade de classes**. Devido à maneira como os navegadores renderizam vários seletores CSS, `p { color: red }` será muitas vezes mais lento quando com escopo (ou seja, quando combinado com um seletor de atributo). Se você usar classes ou ids, como em `.example { color: red }`, você praticamente elimina esse impacto no desempenho. -- **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule. +- **Tenha cuidado com seletores descendentes em componentes recursivos!** Para uma regra CSS com o seletor `.a .b`, se o elemento que corresponde a `.a` contiver um componente filho recursivo, então todos os `.b` deste componente filho serão mirados pela regra. ## ` ``` -The resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only. +As classes resultantes recebem _hash_ para evitar colisões, alcançando o mesmo efeito de definir o escopo do CSS apenas para o componente atual. -Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition). +Consulte a [especificação de Módulos CSS](https://github.com/css-modules/css-modules) para obter mais detalhes, como [exceções globais](https://github.com/css-modules/css-modules#exceptions) e [composição](https://github.com/css-modules/css-modules#composition). -### Custom Inject Name +### Nome de Injeção Customizado -You can customize the property key of the injected classes object by giving the `module` attribute a value: +Você pode personalizar a chave de propriedade do objeto de classes injetado dando um valor ao atributo `module`: ```vue ``` -### Usage with Composition API +### Uso com API de Composição -The injected classes can be accessed in `setup()` and ` ``` -The actual value will be compiled into a hashed CSS custom property, so the CSS is still static. The custom property will be applied to the component's root element via inline styles and reactively updated if the source value changes. +O valor real será compilado em uma propriedade CSS customizada com _hash_, portanto, o CSS ainda é estático. A propriedade customizada será aplicada ao elemento raiz do componente por meio de estilos _inline_ e atualizada de forma reativa se o valor de origem for alterado. diff --git a/src/api/sfc-tooling.md b/src/api/sfc-tooling.md index bd5bdf7c72..f2d56516d0 100644 --- a/src/api/sfc-tooling.md +++ b/src/api/sfc-tooling.md @@ -1,96 +1,96 @@ -# SFC Tooling +# Ferramentas para SFC -## Online Playgrounds +## Playgrounds Online -You don't need to install anything on your machine to try out Vue SFCs - there are many online playgrounds that allow you to do so right in the browser: +Você não precisa instalar nada em sua máquina para experimentar SFCs do Vue - existem muitos playgrounds online que permitem que você faça isso diretamente no navegador: -- [Vue SFC Playground](https://sfc.vuejs.org) (official, deployed from latest commit) +- [Vue SFC Playground](https://sfc.vuejs.org) (oficial, implantado a partir do último commit) - [VueUse Playground](https://play.vueuse.org) -- [Vue on CodeSandbox](https://codesandbox.io/s/vue-3) -- [Vue on Repl.it](https://replit.com/@templates/VueJS-with-Vite) -- [Vue on Codepen](https://codepen.io/pen/editor/vue) -- [Vue on StackBlitz](https://stackblitz.com/fork/vue) -- [Vue on Components.studio](https://components.studio/create/vue3) -- [Vue on WebComponents.dev](https://webcomponents.dev/create/cevue) +- [Vue no CodeSandbox](https://codesandbox.io/s/vue-3) +- [Vue no Repl.it](https://replit.com/@templates/VueJS-with-Vite) +- [Vue no Codepen](https://codepen.io/pen/editor/vue) +- [Vue no StackBlitz](https://stackblitz.com/fork/vue) +- [Vue em Components.studio](https://components.studio/create/vue3) +- [Vue em WebComponents.dev](https://webcomponents.dev/create/cevue) -It is also recommended to use these online playgrounds to provide reproductions when reporting bugs. +Também é recomendável usar esses playgrounds online para fornecer reproduções ao relatar bugs. -## Project Scaffolding +## Andaimes de Projeto ### Vite -[Vite](https://vitejs.dev/) is a lightweight and fast build tool with first-class Vue SFC support. It is created by Evan You, who is also the author of Vue itself! To get started with Vite + Vue, simply run: +[Vite](https://vitejs.dev/) é uma ferramenta de compilação leve e rápida com suporte a Vue SFC de primeira classe. Ele foi criado por Evan You, que também é o autor do próprio Vue! Para começar com o Vite + Vue, basta executar: ```sh npm init vite@latest ``` -Then select the Vue template and follow the instructions. +Em seguida, selecione o _template_ Vue e siga as instruções. -- To learn more about Vite, check out the [Vite docs](https://vitejs.dev/guide/). -- To configure Vue-specific behavior in a Vite project, for example passing options to the Vue compiler, check out the docs for [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#readme). +- Para saber mais sobre o Vite, confira a [documentação do Vite](https://vitejs.dev/guide/). +- Para configurar o comportamento específico do Vue em um projeto Vite, por exemplo, passando opções para o compilador Vue, confira a documentação do [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#readme). -The [SFC Playground](https://sfc.vuejs.org/) also supports downloading the files as a Vite project. +O [SFC Playground](https://sfc.vuejs.org/) também suporta o download dos arquivos como um projeto Vite. ### Vue CLI -[Vue CLI](https://cli.vuejs.org/) is the official webpack-based build tool for Vue projects. To get started with Vue CLI: +[Vue CLI](https://cli.vuejs.org/) é a ferramenta oficial de compilação baseada em webpack para projetos Vue. Para começar com Vue CLI: ```sh npm install -g @vue/cli vue create hello-vue ``` -- To learn more about Vue CLI, check out [Vue CLI docs](https://cli.vuejs.org/guide/installation.html). +- Para saber mais sobre Vue CLI, confira a [documentação do Vue CLI](https://cli.vuejs.org/guide/installation.html). -### Vite or Vue CLI? +### Vite ou Vue CLI? -We recommend starting new projects with Vite as it offers significantly better development experience in terms of dev server startup and HMR update performance ([details](https://vitejs.dev/guide/why.html)). Only go with Vue CLI if you rely on specific webpack features (e.g. Module Federation). +Recomendamos iniciar novos projetos com o Vite, pois oferece uma experiência de desenvolvimento significativamente melhor em termos de inicialização do servidor dev e desempenho de atualização em HMR ([detalhes](https://vitejs.dev/guide/why.html)). Use o Vue CLI apenas se você confiar em recursos específicos do webpack (ex.: Federação de Módulos). -If you are a [Rollup](https://rollupjs.org/) user, you can safely adopt Vite as it uses Rollup for production builds and supports a Rollup-compatible plugin system. [Even Rollup's maintainer recommends Vite as THE web development wrapper for Rollup](https://twitter.com/lukastaegert/status/1412119729431584774). +Se você é um usuário do [Rollup](https://rollupjs.org/), pode adotar o Vite com segurança, pois ele usa o Rollup para compilações de produção e oferece suporte a um sistema de plug-ins compatível com Rollup. [Até o mantenedor do Rollup recomenda o Vite como O _wrapper_ de desenvolvimento web para o Rollup](https://twitter.com/lukastaegert/status/1412119729431584774). -## IDE Support +## Suporte de IDE -The recommended IDE setup is [VSCode](https://code.visualstudio.com/) + the [Volar](https://github.com/johnsoncodehk/volar) extension. Volar provides syntax highlighting and advanced IntelliSense for template expressions, component props and even slots validation. We strongly recommend this setup if you want to get the best possible experience with Vue SFCs, especially if you are also using TypeScript. +A configuração de IDE recomendada é [VSCode](https://code.visualstudio.com/) + a extensão [Volar](https://github.com/johnsoncodehk/volar). O Volar fornece realce de sintaxe e IntelliSense avançado para expressões de _template_, props de componentes e até validação de slots. Recomendamos fortemente esta configuração se você deseja obter a melhor experiência possível com Vue SFCs, especialmente se você também estiver usando TypeScript. -[WebStorm](https://www.jetbrains.com/webstorm/) also provides decent support for Vue SFCs. However, do note as of now its support for ` ``` -## Acknowledgements +## Reconhecimentos -This recipe was based on a contribution from [Kenneth Auchenberg](https://twitter.com/auchenberg), [available here](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli). +Esta receita foi baseada em uma contribuição de [Kenneth Auchenberg](https://twitter.com/auchenberg), [disponível aqui](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli). diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md index ad9195d4e4..cf8fe1ac00 100644 --- a/src/guide/component-basics.md +++ b/src/guide/component-basics.md @@ -1,6 +1,6 @@ # Básico sobre Componentes -Learn component basics with a free video course on Vue School +Aprenda o básico sobre componentes com um curso em vídeo gratuito na Vue School ## Exemplo Base diff --git a/src/guide/component-props.md b/src/guide/component-props.md index f795c59ad4..4e70792f91 100644 --- a/src/guide/component-props.md +++ b/src/guide/component-props.md @@ -2,7 +2,7 @@ > Esta página assume que você já leu o [Básico sobre Componentes](component-basics.md). Leia lá primeiro caso seja novo com componentes. -Learn how component props work with a free lesson on Vue School +Aprenda como props de componentes funcionam com uma aula gratuita na Vue School ## Tipos de Propriedades diff --git a/src/guide/component-registration.md b/src/guide/component-registration.md index 87cb152c8b..828d16b41a 100644 --- a/src/guide/component-registration.md +++ b/src/guide/component-registration.md @@ -1,6 +1,6 @@ # Registro de Componentes -Learn how component registration works with a free lesson on Vue School +Saiba como funciona o registro de componentes com uma aula gratuita no Vue School > Esta página assume que você já leu o [Básico sobre Componentes](component-basics.md). Leia lá primeiro se você for novo no assunto de componentização. diff --git a/src/guide/component-slots.md b/src/guide/component-slots.md index bed80f9554..e910ea2a8b 100644 --- a/src/guide/component-slots.md +++ b/src/guide/component-slots.md @@ -2,7 +2,7 @@ > Esta página assume que você já leu o [Básico sobre Componentes](component-basics.md). Se você não está familizariado com componentes, recomendamos lê-lo primeiro. -Learn slot basics with a free lesson on Vue School +Aprenda o básico sobre slots com uma aula gratuita na Vue School ## Conteúdo do _Slot_ diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index 56be22e784..6ce076eefb 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -47,7 +47,7 @@ setup(props) { } ``` -If `title` is an optional prop, it could be missing from `props`. In that case, `toRefs` won't create a ref for `title`. Instead you'd need to use `toRef`: +Se `title` for um prop opcional, ele pode estar faltando em `props`. Nesse caso, `toRefs` não criará uma referência para `title`. Em vez disso, você precisaria usar `toRef`: ```js // MyBook.vue diff --git a/src/guide/migration/attrs-includes-class-style.md b/src/guide/migration/attrs-includes-class-style.md index 1e8a48fd71..26031af97f 100644 --- a/src/guide/migration/attrs-includes-class-style.md +++ b/src/guide/migration/attrs-includes-class-style.md @@ -1,23 +1,23 @@ --- -title: $attrs includes class & style +title: $attrs inclui classe e estilo badges: - breaking --- -# `$attrs` includes `class` & `style` +# `$attrs` inclui `class` & `style` -## Overview +## Visão Geral -`$attrs` now contains _all_ attributes passed to a component, including `class` and `style`. +`$attrs` agora contém _todos_ atributos passados ​​para um componente, incluindo `class` e `style`. -## 2.x Behavior +## Comportamento v2.x -`class` and `style` attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are _not_ included in `$attrs`, while all other attributes are. +Os atributos `class` e `style` recebem algum tratamento especial na implementação do DOM virtual do Vue 2. Por essa razão, eles _não_ são incluídos em `$attrs`, enquanto todos os outros atributos são. -A side effect of this manifests when using `inheritAttrs: false`: +Um efeito colateral disso se manifesta ao usar `inheritAttrs: false`: -- Attributes in `$attrs` are no longer automatically added to the root element, leaving it to the developer to decide where to add them. -- But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element: +- Atributos em `$attrs` não são mais adicionados automaticamente ao elemento raiz, deixando para o desenvolvedor decidir onde adicioná-los. +- Mas `class` e `style`, não sendo parte de `$attrs`, ainda serão aplicados ao elemento raiz do componente: ```vue