You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/plugins.md
+29-29Lines changed: 29 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,39 +1,39 @@
1
1
# Plugins
2
2
3
-
Plugins are self-contained code that usually add global-level functionality to Vue. It is either an `object`that exposes an `install()`method, or a`function`.
3
+
_Plugins_ são códigos autocontidos que geralmente adicionam funcionalidade de nível global ao Vue. É um `object`que expõe um método `install()`ou uma`function`.
4
4
5
-
There is no strictly defined scope for a plugin, but common scenarios where plugins are useful include:
5
+
Não há escopo estritamente definido para um _plugin_, mas os cenários comuns em que os _plugins_ são úteis incluem:
6
6
7
-
1.Add some global methods or properties, e.g.[vue-custom-element](https://github.com/karol-f/vue-custom-element).
7
+
1.Adicionar alguns métodos e propriedades globais (Ex.:[vue-custom-element](https://github.com/karol-f/vue-custom-element)).
8
8
9
-
2.Add one or more global assets: directives/filters/transitions etc. (e.g.[vue-touch](https://github.com/vuejs/vue-touch)).
9
+
2.Adicionar um ou mais recursos globais: diretivas/filtros/transições etc. (Ex.:[vue-touch](https://github.com/vuejs/vue-touch)).
10
10
11
-
3.Add some component options by global mixin (e.g.[vue-router](https://github.com/vuejs/vue-router)).
11
+
3.Adicionar algumas opções de componente via _mixin_ global. (Ex.:[vue-router](https://github.com/vuejs/vue-router)).
12
12
13
-
4.Add some global instance methods by attaching them to`config.globalProperties`.
13
+
4.Adicionar alguns métodos de instância globais, anexando-os a`config.globalProperties`.
14
14
15
-
5.A library that provides an API of its own, while at the same time injecting some combination of the above (e.g.[vue-router](https://github.com/vuejs/vue-router)).
15
+
5.Uma biblioteca que fornece uma API própria, que ao mesmo tempo injeta alguma combinação dos anteriores. (Ex.:[vue-router](https://github.com/vuejs/vue-router)).
16
16
17
-
## Writing a Plugin
17
+
## Escrevendo um Plugin
18
18
19
-
In order to better understand how to create your own Vue.js plugins, we will create a very simplified version of a plugin that displays `i18n` ready strings.
19
+
Para entender melhor como criar seus próprios _plugins_Vue.js, criaremos uma versão muito simplificada de um _plugin_ que exibe strings prontas para `i18n`.
20
20
21
-
Whenever this plugin is added to an application, the `install`method will be called if it is an object. If it is a `function`, the function itself will be called. In both cases, it will receive two parameters - the `app`object resulting from Vue's `createApp`, and the options passed in by the user.
21
+
Sempre que este _plugin_ for adicionado a uma aplicação, o método `install`será chamado se for um objeto. Se for uma `function`, a própria função será chamada. Em ambos os casos, ele receberá dois parâmetros - o objeto `app`resultante do `createApp` do Vue, e as opções passadas pelo usuário.
22
22
23
-
Let's begin by setting up the plugin object. It is recommended to create it in a separate file and export it, as shown below to keep the logic contained and separate.
23
+
Vamos começar configurando o objeto do _plugin_. Recomenda-se criá-lo em um arquivo separado e exportá-lo, conforme mostrado a seguir, para manter a lógica contida e separada.
24
24
25
25
```js
26
26
// plugins/i18n.js
27
27
exportdefault {
28
28
install: (app, options) => {
29
-
//Plugin code goes here
29
+
//O código do plugin vai aqui
30
30
}
31
31
}
32
32
```
33
33
34
-
We want to make a function to translate keys available to the whole application, so we will expose it using`app.config.globalProperties`.
34
+
Queremos fazer uma função para traduzir as chaves disponíveis para toda a aplicação, então vamos expô-la usando`app.config.globalProperties`.
35
35
36
-
This function will receive a`key` string, which we will use to look up the translated string in the user-provided options.
36
+
Esta função receberá uma _string_`key`, que usaremos para pesquisar a _string_ traduzida nas opções fornecidas pelo usuário.
37
37
38
38
```js
39
39
// plugins/i18n.js
@@ -48,17 +48,17 @@ export default {
48
48
}
49
49
```
50
50
51
-
We will assume that our users will pass in an object containing the translated keys in the `options`parameter when they use the plugin. Our `$translate`function will take a string such as `greetings.hello`, look inside the user provided configuration and return the translated value - in this case, `Bonjour!`
51
+
Assumiremos que nossos usuários passarão um objeto contendo as chaves traduzidas no parâmetro `options`quando usarem o _plugin_. Nossa função `$translate`pegará uma _string_ como `greetings.hello`, olhará dentro da configuração fornecida pelo usuário e vai retornar o valor traduzido - neste caso, `Bonjour!`
52
52
53
-
Ex:
53
+
Ex.:
54
54
55
55
```js
56
56
greetings: {
57
57
hello:'Bonjour!',
58
58
}
59
59
```
60
60
61
-
Plugins also allow us to use`inject`to provide a function or attribute to the plugin's users. For example, we can allow the application to have access to the `options`parameter to be able to use the translations object.
61
+
Os _plugins_ também nos permitem usar`inject`para fornecer uma função ou atributo aos usuários do _plugin_. Por exemplo, podemos permitir que a aplicação tenha acesso ao parâmetro `options`para poder usar o objeto de traduções.
62
62
63
63
```js
64
64
// plugins/i18n.js
@@ -75,9 +75,9 @@ export default {
75
75
}
76
76
```
77
77
78
-
Plugin users will now be able to `inject['i18n']`into their components and access the object.
78
+
Os usuários do _plugin_ agora serão capazes de fazer `inject['i18n']`em seus componentes e acessar o objeto.
79
79
80
-
Additionally, since we have access to the `app` object, all other capabilities like using `mixin`and`directive`are available to the plugin. To learn more about`createApp`and the application instance, check out the [Application API documentation](/api/application-api.html).
80
+
Além disso, como temos acesso ao objeto `app`, todos os outros recursos como o uso de `mixin`e`directive`estão disponíveis para o _plugin_. Para aprender mais sobre`createApp`e a instância do aplicativo, verifique a [documentação da API da Aplicação](/api/application-api.html).
81
81
82
82
```js
83
83
// plugins/i18n.js
@@ -92,35 +92,35 @@ export default {
92
92
93
93
app.directive('my-directive', {
94
94
mounted (el, binding, vnode, oldVnode) {
95
-
//some logic ...
95
+
//alguma lógica...
96
96
}
97
97
...
98
98
})
99
99
100
100
app.mixin({
101
101
created() {
102
-
//some logic ...
102
+
//alguma lógica...
103
103
}
104
104
...
105
105
})
106
106
}
107
107
}
108
108
```
109
109
110
-
## Using a Plugin
110
+
## Usando um Plugin
111
111
112
-
After a Vue app has been initialized with`createApp()`, you can add a plugin to your application by calling the`use()` method.
112
+
Depois que um aplicativo Vue foi inicializado com`createApp()`, você pode adicionar um _plugin_ ao seu aplicativo chamando o método`use()`.
113
113
114
-
We will use the `i18nPlugin`we created in the [Writing a Plugin](#writing-a-plugin)section for demo purposes.
114
+
Usaremos o `i18nPlugin`que criamos na seção [Escrevendo um Plugin](#escrevendo-um-plugin)para fins de demonstração.
115
115
116
-
The `use()`method takes two parameters. The first one is the plugin to be installed, in this case`i18nPlugin`.
116
+
O método `use()`recebe dois parâmetros. O primeiro é o _plugin_ a ser instalado, neste caso`i18nPlugin`.
117
117
118
-
It also automatically prevents you from using the same plugin more than once, so calling it multiple times on the same plugin will install the plugin only once.
118
+
Ele também impede automaticamente que você use o mesmo _plugin_ mais de uma vez, portanto, chamá-lo várias vezes no mesmo _plugin_ instalará o _plugin_ apenas uma vez.
119
119
120
-
The second parameter is optional, and depends on each particular plugin. In the case of the demo `i18nPlugin`, it is an object with the translated strings.
120
+
O segundo parâmetro é opcional e depende de cada _plugin_ específico. No caso do demo `i18nPlugin`, é um objeto com as _strings_ traduzidas.
121
121
122
122
:::info
123
-
If you are using third party plugins such as `Vuex`or`Vue Router`, always check the documentation to know what that particular plugin expects to receive as a second parameter.
123
+
Se você estiver usando _plugins_ de terceiros, como `Vuex`ou`Vue Router`, sempre verifique a documentação para saber o que aquele _plugin_ específico espera receber como um segundo parâmetro.
Checkout[awesome-vue](https://github.com/vuejs/awesome-vue#components--libraries)for a huge collection of community-contributed plugins and libraries.
142
+
Verifique[awesome-vue](https://github.com/vuejs/awesome-vue#components--libraries)para uma enorme coleção de _plugins_ e bibliotecas disponibilizados pela comunidade.
0 commit comments