- 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.
@@ -23,13 +23,13 @@- {{ totalResults }} results found in {{ queryTime }}ms + {{ totalResults }} resultados encontrados em {{ queryTime }}ms
diff --git a/src/README.md b/src/README.md index 77fd39c19c..bde0310468 100644 --- a/src/README.md +++ b/src/README.md @@ -2,13 +2,13 @@ home: true heroImage: /logo.png heroText: Vue.js -tagline: The ProgressiveJavaScript Framework +tagline: O Framework
JavaScript Progressivo actionButtons: - - text: Why Vue.js? + - text: Por que Vue? link: / extraClass: vuemastery-trigger primary icon: fa fa-play-circle - - text: Get Started + - text: Começar link: /guide/introduction - text: GitHub link: https://github.com/vuejs/vue-next @@ -16,17 +16,17 @@ actionButtons: icon: fa fa-github target: _blank features: - - title: Approachable - details: Already know HTML, CSS and JavaScript? Read the guide and start building things in no time! - - title: Versatile - details: An incrementally adoptable ecosystem that scales between a library and a full-featured framework. - - title: Performant + - title: Acessível + details: Já conhece HTML, CSS e JavaScript? Leia o guia e comece a criar aplicações sem perder tempo! + - title: Versátil + details: Ecossistema com adoção incremental, escala de uma simples biblioteca à um framework completo. + - title: Performático details: | 20KB min+gzip Runtime
- Blazing Fast Virtual DOM
- Minimal Optimization Efforts + DOM Virtual Incrivelmente Rápido
+ Esforço Mínimo para Otimizações footer: | - Released under the MIT License
+ Distribuído sob a Licença MIT
Copyright © 2014-2021 Evan You socialIcons: - type: GitHub diff --git a/src/api/application-api.md b/src/api/application-api.md index b6a1470cc8..a027ee665b 100644 --- a/src/api/application-api.md +++ b/src/api/application-api.md @@ -1,6 +1,6 @@ -# Application API +# API da Aplicação -In Vue 3, APIs that globally mutate Vue's behavior are now moved to application instances created by the new `createApp` method. In addition, their effects are now scoped to that specific application's instance: +No Vue 3, APIs que modificam globalmente o comportamento do Vue foram movidas para instâncias da aplicação, criadas pelo novo método `createApp`. Além disso, seus efeitos agora têm como escopo a instância dessa aplicação específica: ```js import { createApp } from 'vue' @@ -8,51 +8,51 @@ import { createApp } from 'vue' const app = createApp({}) ``` -Calling `createApp` returns an application instance. This instance provides an application context. The entire component tree mounted by the application instance share the same context, which provides the configurations that were previously "global" in Vue 2.x. +Chamar `createApp` retorna uma instância da aplicação. Esta instância fornece um contexto da aplicação. Toda a árvore de componentes montada pela instância da aplicação compartilha o mesmo contexto, fornecendo as configurações que eram "globais" anteriormente no Vue 2.x. -In addition, since the `createApp` method returns the application instance itself, you can chain other methods after it which can be found in the following sections. +Além disso, uma vez que o método `createApp` retorna a própria instância da aplicação, você pode encadear outros métodos após ele, que podem ser encontrados nas seções seguintes. ## component -- **Arguments:** +- **Argumentos:** - `{string} name` - - `{Function | Object} definition (optional)` + - `{Function | Object} definition (opcional)` -- **Returns:** +- **Retorna:** - - The application instance if a `definition` argument was passed - - The component definition if a `definition` argument was not passed + - A instância da aplicação se o argumento `definition` é passado + - A definição do componente se o argumento `definition` não é passado -- **Usage:** +- **Uso:** - Register or retrieve a global component. Registration also automatically sets the component's `name` with the given `name` parameter. + Registrar ou recuperar um componente global. O registro também atribui automaticamente o `name` do componente com o parâmetro `name` fornecido. -- **Example:** +- **Exemplo:** ```js import { createApp } from 'vue' const app = createApp({}) -// register an options object +// registrar um objeto de opções app.component('my-component', { /* ... */ }) -// retrieve a registered component +// recuperar um componente registrado const MyComponent = app.component('my-component') ``` -- **See also:** [Components](../guide/component-basics.html) +- **Ver também:** [Componentes](../guide/component-basics.html) ## config -- **Usage:** +- **Uso:** -An object containing application configurations. +Um objeto contendo configurações da aplicação. -- **Example:** +- **Exemplo:** ```js import { createApp } from 'vue' @@ -61,75 +61,75 @@ const app = createApp({}) app.config = {...} ``` -- **See also:** [Application Config](./application-config.html) +- **Ver também:** [Configuração da Aplicação](./application-config.html) ## directive -- **Arguments:** +- **Argumentos:** - `{string} name` - - `{Function | Object} definition (optional)` + - `{Function | Object} definition (opcional)` -- **Returns:** +- **Retorna:** - - The application instance if a `definition` argument was passed - - The directive definition if a `definition` argument was not passed + - A instância da aplicação se o argumento `definition` é passado + - A definição da diretiva se o argumento `definition` não é passado -- **Usage:** +- **Uso:** - Register or retrieve a global directive. + Registrar ou recuperar uma diretiva global. -- **Example:** +- **Exemplo:** ```js import { createApp } from 'vue' const app = createApp({}) -// register +// registro app.directive('my-directive', { - // Directive has a set of lifecycle hooks: - // called before bound element's attributes or event listeners are applied + // A diretiva tem um conjunto de gatilhos de ciclo de vida: + // chamado antes que os atributos do elemento vinculado (bound) ou escutas de evento sejam aplicados created() {}, - // called before bound element's parent component is mounted + // chamado antes que o componente pai do elemento vinculado seja montado beforeMount() {}, - // called when bound element's parent component is mounted + // chamado quando o componente pai do elemento vinculado é montado mounted() {}, - // called before the containing component's VNode is updated + // chamado antes que o VNode do componente contido seja atualizado beforeUpdate() {}, - // called after the containing component's VNode and the VNodes of its - // children have updated + // chamado depois que o VNode do componente contido e de seus filhos + // tenha atualizado updated() {}, - // called before the bound element's parent component is unmounted + // chamado antes que o componente pai do elemento vinculado seja desmontado beforeUnmount() {}, - // called when the bound element's parent component is unmounted + // chamado quando o componente pai do elemento vinculado é desmontado unmounted() {} }) -// register (function directive) +// registro (diretiva de função) app.directive('my-directive', () => { - // this will be called as `mounted` and `updated` + // isso será chamado como `mounted` e `updated` }) -// getter, return the directive definition if registered +// getter, retorna a definição da diretiva se registrada const myDirective = app.directive('my-directive') ``` -Directive hooks are passed these arguments: +Os gatilhos de diretiva recebem estes argumentos: #### el -The element the directive is bound to. This can be used to directly manipulate the DOM. +O elemento ao qual a diretiva está vinculada. Pode ser usado para manipular diretamente o DOM. #### binding -An object containing the following properties. +Um objeto contendo as seguintes propriedades. -- `instance`: The instance of the component where directive is used. -- `value`: The value passed to the directive. For example in `v-my-directive="1 + 1"`, the value would be `2`. -- `oldValue`: The previous value, only available in `beforeUpdate` and `updated`. It is available whether or not the value has changed. -- `arg`: The argument passed to the directive, if any. For example in `v-my-directive:foo`, the arg would be `"foo"`. -- `modifiers`: An object containing modifiers, if any. For example in `v-my-directive.foo.bar`, the modifiers object would be `{ foo: true, bar: true }`. -- `dir`: an object, passed as a parameter when directive is registered. For example, in the directive +- `instance`: A instância do componente onde a diretiva é usada. +- `value`: O valor passado para a diretiva. Por exemplo em `v-my-directive="1 + 1"`, o valor seria `2`. +- `oldValue`: O valor anterior, disponível somente em `beforeUpdate` e `updated`. Está disponível se o valor foi alterado ou não. +- `arg`: O argumento passado para a diretiva, se houver. Por exemplo em `v-my-directive:foo`, o argumento seria `"foo"`. +- `modifiers`: Um objeto contendo modificadores, se houver. Por exemplo em `v-my-directive.foo.bar`, o objeto `modifiers` seria `{ foo: true, bar: true }`. +- `dir`: um objeto, passado como um parâmetro quando a diretiva é registrada. Por exemplo, na diretiva: ```js app.directive('focus', { @@ -139,7 +139,7 @@ app.directive('focus', { }) ``` -`dir` would be the following object: +`dir` seria o seguinte objeto: ```js { @@ -151,50 +151,50 @@ app.directive('focus', { #### vnode -A blueprint of the real DOM element received as el argument above. +Um desenho (_blueprint_) do elemento DOM real recebido como o argumento `el` acima. #### prevNode -The previous virtual node, only available in the `beforeUpdate` and `updated` hooks. +O nó virtual anterior, somente disponível nos gatilhos `beforeUpdate` e `updated`. -:::tip Note -Apart from `el`, you should treat these arguments as read-only and never modify them. If you need to share information across hooks, it is recommended to do so through element's [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset). +:::tip Nota +Além de `el`, você deve tratar esses argumentos como somente leitura e nunca modificá-los. Se você precisar compartilhar informações entre gatilhos, é recomendado fazê-lo por meio do elemento [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset). ::: -- **See also:** [Custom Directives](../guide/custom-directive.html) +- **Ver também:** [Diretivas Personalizadas](../guide/custom-directive.html) ## mixin -- **Arguments:** +- **Argumentos:** - `{Object} mixin` -- **Returns:** +- **Retorna:** - - The application instance + - A instância da aplicação -- **Usage:** +- **Uso:** - Apply a mixin in the whole application scope. Once registered they can be used in the template of any component within the current application. This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**. + Aplicar um mixin em todo o escopo da aplicação. Uma vez registrado eles podem ser usados no _template_ de qualquer componente da aplicação atual. Pode ser usado por autores de plugins para injetar comportamento personalizado nos componentes. **Não recomendado no código da aplicação**. -- **See also:** [Global Mixin](../guide/mixins.html#global-mixin) +- **Ver também:** [Mixin Global](../guide/mixins.html#mixin-global) ## mount -- **Arguments:** +- **Argumentos:** - `{Element | string} rootContainer` - - `{boolean} isHydrate (optional)` + - `{boolean} isHydrate (opcional)` -- **Returns:** +- **Retorna:** - - The root component instance + - A instância do componente raiz -- **Usage:** +- **Uso:** - The `innerHTML` of the provided DOM element will be replaced with the rendered template of the application root component. + O `innerHTML` do elemento DOM fornecido será substituído pelo _template_ renderizado do componente raiz do aplicativo. -- **Example:** +- **Exemplo:** ```html @@ -206,41 +206,41 @@ Apart from `el`, you should treat these arguments as read-only and never modify import { createApp } from 'vue' const app = createApp({}) -// do some necessary preparations +// faça alguns preparativos necessários app.mount('#my-app') ``` -- **See also:** - - [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram) +- **Ver também:** + - [Diagrama do Ciclo de Vida](../guide/instance.html#diagrama-do-ciclo-de-vida) ## provide -- **Arguments:** +- **Argumentos:** - `{string | Symbol} key` - `value` -- **Returns:** +- **Retorna:** - - The application instance + - A instância da aplicação -- **Usage:** +- **Uso:** - Sets a value that can be injected into all components within the application. Components should use `inject` to receive the provided values. + Define um valor que pode ser injetado em todos os componentes dentro da aplicação. Componentes devem usar `inject` para receber os valores providos. - From a `provide`/`inject` perspective, the application can be thought of as the root-level ancestor, with the root component as its only child. + De uma perspectiva `provide`/`inject`, a aplicação pode ser considerada como um ancestral do nível raiz, com o componente raiz como seu filho único. - This method should not be confused with the [provide component option](options-composition.html#provide-inject) or the [provide function](composition-api.html#provide-inject) in the composition API. While those are also part of the same `provide`/`inject` mechanism, they are used to configure values provided by a component rather than an application. + Este método não pode ser confundido com a [opção `provide` de componente](options-composition.html#provide-inject) ou a [função `provide`](composition-api.html#prover-injetar) da API de composição. Embora também façam parte do mesmo mecanismo `provide`/`inject`, eles são usados para configurar valores providos por um componente ao invés da aplicação. - Providing values via the application is especially useful when writing plugins, as plugins typically wouldn't be able to provide values using components. It is an alternative to using [globalProperties](application-config.html#globalproperties). + Prover valores por meio da aplicação é especialmente útil quando ao escrever plugins, pois os plugins normalmente não seriam capazes de prover valores usando componentes. É uma alternativa ao uso de [globalProperties](application-config.html#globalproperties). - :::tip Note - The `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down a reactive object, properties on that object do remain reactive. + :::tip Nota + Os vínculos `provide` e `inject` NÃO são reativos. Isto é intencional. No entanto, se você passar um objeto reativo, as propriedades desse objeto permanecerão reativas. ::: -- **Example:** +- **Exemplo:** - Injecting a property into the root component, with a value provided by the application: + Injetando uma propriedade no componente raiz, com um valor provido pela aplicação: ```js import { createApp } from 'vue' @@ -257,16 +257,16 @@ const app = createApp({ app.provide('user', 'administrator') ``` -- **See also:** - - [Provide / Inject](../guide/component-provide-inject.md) +- **Ver também:** + - [Prover / Injetar](../guide/component-provide-inject.md) ## unmount -- **Usage:** +- **Uso:** - Unmounts a root component of the application instance. + Desmonta um componente raiz da instância da aplicação. -- **Example:** +- **Exemplo:** ```html @@ -278,33 +278,33 @@ app.provide('user', 'administrator') import { createApp } from 'vue' const app = createApp({}) -// do some necessary preparations +// faça algumas preparações necessárias app.mount('#my-app') -// Application will be unmounted 5 seconds after mount +// Aplicação será desmontada 5 segundos após a montagem setTimeout(() => app.unmount(), 5000) ``` ## use -- **Arguments:** +- **Argumentos:** - `{Object | Function} plugin` - - `...options (optional)` + - `...options (opcional)` -- **Returns:** +- **Retorna:** - - The application instance + - A instância da aplicação -- **Usage:** +- **Uso:** - Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the `install` method. + Instalar um plugin Vue.js. Se o plugin é um objeto, deve expor um método `install`. Se for uma função em si, esta será tratada como o método `install`. - The `install` method will be called with the application as its first argument. Any `options` passed to `use` will be passed on in subsequent arguments. + O método `install` será chamado com a aplicação como seu primeiro argumento. Quaisquer `options` passadas para `use` serão passadas em argumentos subsequentes. - When this method is called on the same plugin multiple times, the plugin will be installed only once. + Quando esse método é chamado no mesmo plugin várias vezes, o plugin será instalado apenas uma vez. -- **Example:** +- **Exemplo:** ```js import { createApp } from 'vue' @@ -316,15 +316,15 @@ setTimeout(() => app.unmount(), 5000) app.mount('#app') ``` -- **See also:** [Plugins](../guide/plugins.html) +- **Ver também:** [Plugins](../guide/plugins.html) ## version -- **Usage:** +- **Uso:** - Provides the installed version of Vue as a string. This is especially useful for community [plugins](/guide/plugins.html), where you might use different strategies for different versions. + Fornece a versão instalada do Vue como uma string. Isso é especialmente útil para [plugins](/guide/plugins.html) da comunidade, onde você pode usar estratégias diferentes para versões diferentes. -- **Example:** +- **Exemplo:** ```js export default { @@ -332,7 +332,7 @@ setTimeout(() => app.unmount(), 5000) const version = Number(app.version.split('.')[0]) if (version < 3) { - console.warn('This plugin requires Vue 3') + console.warn('Este plugin requer o Vue 3') } // ... @@ -340,4 +340,4 @@ setTimeout(() => app.unmount(), 5000) } ``` -- **See also**: [Global API - version](/api/global-api.html#version) +- **Ver também:**: [API Global - version](/api/global-api.html#version) diff --git a/src/api/application-config.md b/src/api/application-config.md index b53487fe81..7a0b4f61d9 100644 --- a/src/api/application-config.md +++ b/src/api/application-config.md @@ -1,6 +1,6 @@ -# Application Config +# Configuração da Aplicação -Every Vue application exposes a `config` object that contains the configuration settings for that application: +Todo aplicativo Vue expõe um objeto `config` que contém as configurações para esse aplicativo: ```js const app = createApp({}) @@ -8,51 +8,51 @@ const app = createApp({}) console.log(app.config) ``` -You can modify its properties, listed below, before mounting your application. +Você pode modificar suas propriedades, listadas abaixo, antes de montar a sua aplicação. ## errorHandler -- **Type:** `Function` +- **Tipo:** `Function` -- **Default:** `undefined` +- **Padrão:** `undefined` -- **Usage:** +- **Uso:** ```js app.config.errorHandler = (err, vm, info) => { - // handle error - // `info` is a Vue-specific error info, e.g. which lifecycle hook - // the error was found in + // manipula erro + // `info` traz informações de erros específicos do Vue, + // ex.: em qual gatilho do ciclo de vida o erro foi encontrado } ``` -Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the corresponding application instance. +Atribua um manipulador para erros não capturados durante a função de renderização do componente e os observadores. O manipulador é chamado com o erro e a instância da aplicação correspondente. -> Error tracking services [Sentry](https://sentry.io/for/vue/) and [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) provide official integrations using this option. +> Os serviços de rastreamento de erros [Sentry](https://sentry.io/for/vue/) e [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) fornecem integrações oficiais usando essa opção. ## warnHandler -- **Type:** `Function` +- **Tipo:** `Function` -- **Default:** `undefined` +- **Padrão:** `undefined` -- **Usage:** +- **Uso:** ```js app.config.warnHandler = function(msg, vm, trace) { - // `trace` is the component hierarchy trace + // `trace` é o rastro da hierarquia do componente } ``` -Assign a custom handler for runtime Vue warnings. Note this only works during development and is ignored in production. +Atribua um manipulador customizado para avisos do Vue em tempo de execução. Note que isso funciona apenas durante o desenvolvimento e é ignorado em produção. ## globalProperties -- **Type:** `[key: string]: any` +- **Tipo:** `[key: string]: any` -- **Default:** `undefined` +- **Padrão:** `undefined` -- **Usage:** +- **Uso:** ```js app.config.globalProperties.foo = 'bar' @@ -64,9 +64,9 @@ app.component('child-component', { }) ``` -Adds a global property that can be accessed in any component instance inside the application. The component’s property will take priority when there are conflicting keys. +Adiciona uma propriedade global que pode ser acessada em qualquer instância de componente dentro da aplicação. A propriedade do componente terá prioridade quando houver chaves conflitantes. -This can replace Vue 2.x `Vue.prototype` extending: +Isto pode substituir o ato de estender o `Vue.prototype` no Vue 2.x: ```js // Before @@ -79,11 +79,11 @@ app.config.globalProperties.$http = () => {} ## optionMergeStrategies -- **Type:** `{ [key: string]: Function }` +- **Tipo:** `{ [key: string]: Function }` -- **Default:** `{}` +- **Padrão:** `{}` -- **Usage:** +- **Uso:** ```js const app = createApp({ @@ -93,116 +93,116 @@ const app = createApp({ }) app.config.optionMergeStrategies.hello = (parent, child) => { - return `Hello, ${child}` + return `Olá, ${child}` } app.mixin({ hello: 'Vue' }) -// 'Hello, Vue' +// 'Olá, Vue' ``` -Define merging strategies for custom options. +Defina estratégias de mesclagem para opções customizadas. -The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. +A estratégia de mesclagem recebe o valor daquela opção definida nas instâncias de pai e filho como primeiro e segundo argumentos, respectivamente. -- **See also:** [Custom Option Merging Strategies](../guide/mixins.html#custom-option-merge-strategies) +- **Ver também:** [Estratégias de Mesclagem de Opções Personalizadas](../guide/mixins.html#estrategias-de-mesclagem-de-opcoes-personalizadas) ## performance -- **Type:** `boolean` +- **Tipo:** `boolean` -- **Default:** `false` +- **Padrão:** `false` -- **Usage**: +- **Uso**: -Set this to `true` to enable component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel. Only works in development mode and in browsers that support the [performance.mark](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark) API. +Defina isto como `true` para habilitar a inicialização, compilação, renderização e rastreamento do desempenho de correções do componente no painel de desempenho ou linha do tempo no devtool do navegador. Funciona apenas em modo de desenvolvimento e em navegadores que suportam a API [performance.mark](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark). ## compilerOptions
toggled content
+ conteúdo alternado
toggled content
+ conteúdo alternado
hi
+ oi
```
-Into the following:
+No seguinte:
```vue
- hi
+ oi
```
-### 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 `red
+vermelho
``` -### Usage with Composition API +### Uso com API de Composição -The injected classes can be accessed in `setup()` and ` -hello
+olá
``` -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/cookbook/editable-svg-icons.md b/src/cookbook/editable-svg-icons.md index c0f85ce5e7..173a442718 100644 --- a/src/cookbook/editable-svg-icons.md +++ b/src/cookbook/editable-svg-icons.md @@ -1,26 +1,26 @@ -# Editable SVG Icon Systems +# Sistemas de Ícones SVG Editáveis -## Base Example +## Exemplo Base -There are many ways to create an SVG Icon System, but one method that takes advantage of Vue's capabilities is to create editable inline icons as components. Some of the advantages of this way of working are: +Existem muitas formas de criar um sistema de ícone SVG, mas o método que tira vantagem das capacidades do Vue é criar ícones *inline* editáveis como componente. Algumas das vantagens desta forma de trabalhar são: -- They are easy to edit on the fly -- They are animatable -- You can use standard props and defaults to keep them to a typical size or alter them if you need to -- They are inline, so no HTTP requests are necessary -- They can be made accessible dynamically +- São fáceis de se editar em tempo real +- São animáveis +- Pode se usar props, definindo padrões ou alterando-as caso necessário +- São incorporados, então não exigem requisições HTTP adicionais +- Eles podem ser acessados dinamicamente -First, we'll create a folder for all of the icons, and name them in a standardized fashion for easy retrieval: +Primeiro, vamos criar uma pasta para todos os ícones, e nomeá-los de forma padronizada para fácil recuperação: - `components/icons/IconBox.vue` - `components/icons/IconCalendar.vue` - `components/icons/IconEnvelope.vue` -Here's an example repo to get you going, where you can see the entire setup: [https://github.com/sdras/vue-sample-svg-icons/](https://github.com/sdras/vue-sample-svg-icons/) +Eis um exemplo de repositório, onde pode ver toda a configuração: [https://github.com/sdras/vue-sample-svg-icons/](https://github.com/sdras/vue-sample-svg-icons/)  -We'll create a base icon (`IconBase.vue`) component that uses a slot. +Vamos criar um componente de ícone base (`IconBase.vue`) que usa um `slot`. ```html @@ -40,9 +40,9 @@ We'll create a base icon (`IconBase.vue`) component that uses a slot. ``` -You can use this base icon as is- the only thing you might need to update is the `viewBox` depending on the `viewBox` of your icons. In the base, we're making the `width`, `height`, `iconColor`, and name of the icon props so that it can be dynamically updated with props. The name will be used for both the `Pretty easily accomplished! And easy to update on the fly.
+Um resultado atingido facilmente! E fácil de se atualizar sempre que necessário. -You can see more animated examples in the repo [here](https://github.com/sdras/vue-sample-svg-icons/) +Pode ver mais exemplos de animações [neste repositório](https://github.com/sdras/vue-sample-svg-icons/) -## Additional Notes +## Notas Adicionais -Designers may change their minds. Product requirements change. Keeping the logic for the entire icon system in one base component means you can quickly update all of your icons and have them propagate through the whole system. Even with the use of an icon loader, some situations require you to recreate or edit every SVG to make global changes. This method can save you that time and pain. +Os *designers* podem mudar de ideias. Ou podem ocorrer mudanças nos requisitos do produto. Manter a lógica para todo o sistema de ícones em um componente base garante a possibilidade de atualizá-los todos, e ter isso automaticamente propagado por todo o sistema. Mesmo com o uso de uma ferramenta do tipo *icon loader*, algumas situações irão requerer que você recrie ou edite todos os SVG, para fazer alterações globais. O presente método pode ainda poupar-lhe tempo e dor. -## When To Avoid This Pattern +## Quando Evitar Este Padrão -This type of SVG icon system is really useful when you have a number of icons that are used in different ways throughout your site. If you're repeating the same icon many times on one page (e.g. a giant table with a delete icon in each row), it might make more sense to have all of the sprites compiled into a sprite sheet and use `