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/installation.md
+25-26Lines changed: 25 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Instalação
2
2
3
-
## Notas de lançamento
3
+
## Notas de Lançamento
4
4
5
5
Última versão beta: 
6
6
@@ -13,7 +13,7 @@ Notas de lançamento detalhadas para cada versão estão disponíveis no [GitHub
13
13
14
14
> Vue Devtools para o Vue 3 requer, no mínimo, `vue@^3.0.0-rc.1`
15
15
16
-
Ao utilizar o Vue, recomendamos também instalar instalar a extensão [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) no seu navegador, o que lhe permite inspecionar e realizar _debug_ de suas aplicações Vue através de uma interface mais amigável.
16
+
Ao utilizar o Vue, recomendamos também instalar a extensão [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) no seu navegador, que lhe permite inspecionar e realizar _debug_ de suas aplicações Vue através de uma interface mais amigável.
17
17
18
18
[Adquirir a extensão para Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg)
19
19
@@ -29,11 +29,11 @@ Para prototipação ou aprendizagem, você pode utilizar a última versão com:
29
29
<scriptsrc="https://unpkg.com/vue@next"></script>
30
30
```
31
31
32
-
Para produção, recomendamos vinculá-lo a uma versão e uma distribuição específicas, a fim de evitar incompatibilidade de funcionalidades devido a uma nova versão.
32
+
Para produção, recomendamos vinculá-lo a uma versão e uma distribuição _(build)_específicas, a fim de evitar incompatibilidade de funcionalidades devido a uma nova versão.
33
33
34
34
## NPM
35
35
36
-
NPM é o método de instalação que recomendamos ao construir aplicações de larga escala com o Vue. Ele combina perfeitamente com empacotadores de módulos, como o [Webpack](https://webpack.js.org/) ou o [Browserify](http://browserify.org/). Vue também oferece ferramentas que auxiliam na criação de [Componentes Single File](../guide/single-file-component.html).
36
+
NPM é o método de instalação que recomendamos ao construir aplicações de larga escala com o Vue. Ele combina perfeitamente com empacotadores de módulos_(module bundlers)_, como o [Webpack](https://webpack.js.org/) ou o [Browserify](http://browserify.org/). Vue também oferece ferramentas que auxiliam na criação de [Componentes Single File](../guide/single-file-component.html).
37
37
38
38
```bash
39
39
# última versão estável
@@ -42,10 +42,10 @@ $ npm install vue@next
42
42
43
43
## CLI
44
44
45
-
Vue oferece uma [CLI oficial](https://github.com/vuejs/vue-cli) para projetar, rapidamente, ambiciosas _Single Page Applications_. Este oferece conjuntos prontos de configurações de distribuição para um processo de desenvolvimento _frontend_ moderno. Basta apenas alguns minutos para ter tudo funcionando e sendo executado com _hot-reload_, _lint-on-save_ e distribuições prontas para produção. Confira a [documentação da Vue CLI](https://cli.vuejs.org) para mais detalhes.
45
+
Vue oferece uma [CLI oficial](https://github.com/vuejs/vue-cli) para projetar, rapidamente, ambiciosas _Single Page Applications_. Esta oferece conjuntos prontos de configurações de distribuição para um processo de desenvolvimento _frontend_ moderno. Basta apenas alguns minutos para ter tudo funcionando e sendo executado com _hot-reload_, _lint-on-save_ e distribuições_(builds)_ prontas para produção. Confira a [documentação da Vue CLI](https://cli.vuejs.org) para mais detalhes.
46
46
47
47
::: tip
48
-
A CLI pressupõe que você já possui conhecimento prévio em Node.js e das ferramentas de distribuição associadas. Se Vue ou as ferramentas de distribuição _frontend_ associadas são assuntos novos para você, recomendamos fortemente que você passe por todo <ahref="./">o guia</a> antes de utilizar a CLI.
48
+
A CLI pressupõe que você já possui conhecimento prévio em Node.js e das ferramentas de distribuição _(build tools)_associadas. Se Vue ou as ferramentas de distribuição _frontend_ associadas são assuntos novos para você, recomendamos fortemente que você passe por todo <ahref="./">o guia</a> antes de utilizar a CLI.
49
49
:::
50
50
51
51
Para o Vue 3, você deve utilizar, no mínimo, a Vue CLI v4.5, disponível no `npm` através do `@vue/cli@next`. Para atualizar sua Vue CLI, você deve reinstalar o pacote `@vue/cli` globalmente, em sua última versão:
@@ -64,7 +64,7 @@ vue upgrade --next
64
64
65
65
## Vite
66
66
67
-
[Vite](https://github.com/vitejs/vite) é uma ferramenta de distribuição para desenvolvimento _web_ que permite servir código de maneira ultra rápida devido à sua abordagem de importação _ES Module_ nativa.
67
+
[Vite](https://github.com/vitejs/vite) é uma ferramenta de distribuição _(build tool)_para desenvolvimento _web_ que permite servir código de maneira ultra rápida devido à sua abordagem de importação _ES Module_ nativa.
68
68
69
69
Projetos Vue podem ser rapidamente inicializados com Vite ao executar os seguintes comandos no seu _terminal_:
70
70
@@ -86,56 +86,55 @@ $ yarn
86
86
$ yarn dev
87
87
```
88
88
89
-
## Esclarecimento sobre as diferentes distribuições
89
+
## Esclarecimento sobre as diferentes Distribuições
90
90
91
-
No [diretório `dist/` do pacote NPM](https://cdn.jsdelivr.net/npm/[email protected]/dist/), você encontrará diversas distribuições do Vue.js. A seguir, temos uma visão geral de qual arquivo do `dist` você deve utilizar, dependendo do seu caso de uso:
91
+
No [diretório `dist/` do pacote NPM](https://cdn.jsdelivr.net/npm/[email protected]/dist/), você encontrará diversas distribuições _(builds)_do Vue.js. A seguir, temos uma visão geral de qual arquivo do `dist` você deve utilizar, dependendo do seu caso de uso:
92
92
93
-
### Utilizar a partir de uma CDN ou sem um empacotador
93
+
### Utilizando a partir de uma CDN ou sem um Empacotador
94
94
95
95
#### `vue(.runtime).global(.prod).js`:
96
96
97
-
- Para uso direto no navegador, através de `<script src="...">`, e expõe uma variável Vue global.
97
+
- Para uso direto no navegador, através de `<script src="...">`, ao expor uma variável Vue global.
98
98
- Compilação de _templates_ diretamente no navegador:
99
-
-`vue.global.js` é a distribuição "completa", que inclui compilador e _runtime_, a fim de dar suporte à compilação de _templates_ sob demanda.
99
+
-`vue.global.js` é a distribuição _(build)_"completa", que inclui compilador e _runtime_, a fim de dar suporte à compilação de _templates_ sob demanda.
100
100
-`vue.runtime.global.js` possui apenas o _runtime_ e exige _templates_ pré-compilados.
101
101
- Inclui todos os pacotes internos básicos do Vue - em outras palavras, é apenas um arquivo, sem dependências externas. Isto significa que você deve importar tudo deste arquivo - e apenas deste arquivo, a fim de garantir que você sempre estará utilizando a mesma instância de código.
102
-
- Possui distribuições _hard-coded_ para produção e desenvolvimento, sendo a distribuição de produção já pré-minificada. Utilize arquivos `*.prod.js` em produção.
102
+
- Possui distribuições _(builds)__hard-coded_ para produção e desenvolvimento, sendo a distribuição de produção já pré-minificada. Utilize arquivos `*.prod.js` em produção.
103
103
104
104
:::tip Note
105
-
Distribuições globais não são distribuições [UMD](https://github.com/umdjs/umd). Elas são geradas como [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) e são destinadas apenas para uso direto através de `<script src="...">`.
105
+
Distribuições globais _(global builds)_não são distribuições [UMD](https://github.com/umdjs/umd). Elas são geradas como [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) e são destinadas apenas para uso direto através de `<script src="...">`.
106
106
:::
107
107
108
108
#### vue(.runtime).esm-browser(.prod).js:
109
109
110
110
- Para uso através de importação _ES modules_ nativa (no navegador, através de `<script type="module">`).
111
-
- Compartilha o mesmo _runtime_ de compilação, o mesmo _inlining_ de dependências e o mesmo comportamento de produção/desenvolvimento, _hard-coded_, com a distribuição global.
111
+
- Compartilha o mesmo _runtime_ de compilação, o mesmo _inlining_ de dependências e o mesmo comportamento de produção/desenvolvimento, _hard-coded_, com a distribuição _(build)_global.
112
112
113
-
### Utilizar a partir de um empacotador
113
+
### Utilizando a partir de um Empacotador
114
114
115
115
#### vue(.runtime).esm-bundler.js:
116
116
117
117
- Para uso de empacotadores, como `webpack`, `rollup` e `parcel`.
118
118
- Gera distribuições de produção e desenvolvimento a partir de `process.env.NODE_ENV guards` (deve ser substituído pelo empacotador)
119
-
- Não inclui distribuições minificadas (a fim deste processo ser realizado junto do resto do código, pelo empacotador)
119
+
- Não inclui distribuições _(builds)_minificadas (a fim deste processo ser realizado junto do resto do código, pelo empacotador)
120
120
- Importa dependências (por exemplo, `@vue/runtime-core`, `@vue/runtime-compiler`)
121
-
- Dependências importadas também são distribuições geradas pelo _esm-bundler_ e, por sua vez, importarão suas dependências (por exemplo, `@vue/runtime-core` importa `@vue/reactivity`)
122
-
- Isto significa que você **pode** instalar ou importar estas dependências individualmente, ficando sem instâncias diferentes. Entretanto, você deve garantir a unicidade utilizando sempre das mesmas versões.
121
+
- Dependências importadas também são distribuições _(builds)_geradas pelo _esm-bundler_ e, por sua vez, importarão suas dependências (por exemplo, `@vue/runtime-core` importa `@vue/reactivity`)
122
+
- Isto significa que **é possível** instalar ou importar estas dependências individualmente, ficando sem instâncias diferentes. Entretanto, você deve garantir a unicidade, utilizando sempre das mesmas versões.
123
123
- Compilação de _template_ diretamente no navegador:
124
-
-`vue.runtime.esm-bundler.js`**(padrão)** compreende apenas o _runtime_, e requer que todos os _templates_ sejam pré-compilados. Por esta razão, empacotadores acabam utilizando este arquivo, por padrão (definido em `module` no `package.json`),
125
-
uma vez que, normalmente, já pré-compilam os _templates_ do projeto (por exemplo, arquivos `*.vue`)
124
+
-`vue.runtime.esm-bundler.js`**(padrão)** compreende apenas o _runtime_, e requer que todos os _templates_ sejam pré-compilados. Por esta razão, empacotadores _(bundlers)_ acabam utilizando este arquivo, por padrão (definido em `module` no `package.json`), uma vez que, normalmente, já pré-compilam os _templates_ do projeto (por exemplo, arquivos `*.vue`)
126
125
-`vue.esm-bundler.js`: inclui o compilador e o _runtime_. Utilize este arquivo se você está utilizando um empacotador, mas ainda assim deseja compilar _templates_ sob demanda (por exemplo, _templates_ disponíveis no DOM ou _templates_ em _strings_ do JavaScript)
127
126
128
-
### Para renderização no lado do servidor
127
+
### Para Renderização no lado do Servidor
129
128
130
129
#### `vue.cjs(.prod).js`:
131
130
132
131
- Para renderização no lado do servidor, em Node.js, via `require()`.
133
-
- Esta é a distribuição que será carregada se você empacota sua aplicação com _webpack_ utilizando `target: 'node'` e externalizando `vue` apropriadamente.
132
+
- Esta é a distribuição _(build)_que será carregada se você empacota sua aplicação com _webpack_ utilizando `target: 'node'` e externalizando `vue` apropriadamente.
134
133
- Os arquivos de desenvolvimento e produção são previamente gerados, mas o arquivo mais apropriado é automaticamente adquirido baseado em `process.env.NODE_ENV`.
135
134
136
-
## _Runtime_ + Compilador vs. _Runtime_
135
+
## _Runtime_ + Compilador vs. somente _Runtime_
137
136
138
-
Se você precisar compilar _templates_ no cliente (por exemplo, passando uma _string_ para uma propriedade `template` ou utilizando do conteúdo de um elemento já existente no DOM do HTML), você precisará do compilador e, portanto, da distribuição completa:
137
+
Se você precisar compilar _templates_ no cliente (por exemplo, passando uma _string_ para uma propriedade `template` ou utilizando do conteúdo de um elemento já existente no DOM do HTML), você precisará do compilador e, portanto, da distribuição _(build)_completa:
139
138
140
139
```js
141
140
// isto requer o compilador
@@ -151,4 +150,4 @@ Vue.createApp({
151
150
})
152
151
```
153
152
154
-
Ao utilizar o `vue-loader`, _templates_ dentro de arquivos `*.vue` são pré-compilados para JavaScript durante o processo de construção. Você não precisa, necessariamente, do compilador no seu pacote final e, portanto, pode utilizar apenas a distribuição _runtime_.
153
+
Ao utilizar o `vue-loader`, _templates_ dentro de arquivos `*.vue` são pré-compilados para JavaScript durante o processo de construção_(build time)_. Você não precisa, necessariamente, do compilador no seu pacote_(bundle)_ final e, portanto, pode utilizar apenas a distribuição _runtime_.
0 commit comments