# Instalação
Vue.js foi projetado propositalmente para ser incrementalmente adotável. Isto significa que pode ser integrado em um projeto de várias formas, dependendo de suas necessidades.
Há quatro formas principais de adicionar Vue.js a um projeto:
- Importar a partir de CDN na página desejada
- Baixe os arquivos JavaScript e hospede-os você mesmo
- Instalar usando npm
- Usar a ferramenta CLI oficial para criar o projeto, usando configurações previamente ajustadas para o desenvolvimento frontend moderno (com hot-reload, lint-on-save e muito mais)
# Notas de Lançamento
Última versão:
Notas de lançamento detalhadas para cada versão estão disponíveis no GitHub (opens new window).
# Vue Devtools
Atualmente em versão Beta - integração com Vuex e Router ainda em andamento
Ao utilizar o Vue, recomendamos também instalar a extensão Vue Devtools (opens new window) no seu navegador, que lhe permite inspecionar e realizar debug de suas aplicações Vue através de uma interface mais amigável.
Adquirir a extensão para Chrome (opens new window)
Adquirir a extensão para Firefox (opens new window)
Adquirir a aplicação individual, baseada em Electron (opens new window)
# CDN
Para prototipação ou aprendizagem, você pode utilizar a última versão com:
<script src="https://unpkg.com/vue@next"></script>
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.
# Baixar e hospedar em seu próprio servidor
Se você não pode usar uma CDN em produção, ou não deseja fazer uso de ferramentas de construção, você pode baixar o arquivo .js
e hospedá-lo em seu próprio servidor web. Desta forma, você pode então incluí-lo usando uma tag <script>
, da mesma forma como feito com a abordagem CDN.
Os arquivos podem ser encontrados e baixados de uma CDN, como unpkg (opens new window) ou jsDelivr (opens new window). Os vários arquivos diferentes serão explicados mais tarde, mas normalmente você desejará baixar ambas as versões de desenvolvimento e de produção.
# npm
O método de instalação através do npm é 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 (opens new window) ou o Rollup (opens new window).
# última versão estável
$ npm install vue@next
2
O Vue também fornece ferramentas de acompanhamento para a criação de Componentes Single-File (SFCs). Se você quiser usar SFCs, também precisará instalar @vue/compiler-sfc
:
$ npm install -D @vue/compiler-sfc
Se você está vindo do Vue 2, observe que @vue/compiler-sfc
substitui vue-template-compiler
.
Além do @vue/compiler-sfc
, você também precisará de um loader ou plugin SFC adequado para o empacotador escolhido. Consulte a documentação de SFC para obter mais informações.
Na maioria dos casos, a maneira preferida de criar uma construção com webpack e configuração mínima é usar o Vue CLI.
# CLI
Vue oferece uma CLI oficial (opens new window) para projetar, rapidamente, ambiciosas Single Page Applications. Esta oferece conjuntos prontos de ambientes de compilaçã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.
TIP
A CLI pressupõe que você já possui conhecimento prévio em Node.js e das ferramentas de construção (build tools) associadas. Se Vue ou as ferramentas de construção frontend associadas são assuntos novos para você, recomendamos fortemente que você passe por todo o guia sem qualquer ferramenta de construção, antes de utilizar a CLI.
Para o Vue 3, você deve utilizar, no mínimo, a Vue CLI v4.5, disponível no npm como @vue/cli
. Para atualizá-lo, você deve reinstalar o pacote @vue/cli
globalmente, em sua última versão:
yarn global add @vue/cli
# OU
npm install -g @vue/cli
2
3
Logo em seguida, em seus projetos Vue, execute:
vue upgrade --next
# Vite
Vite (opens new window) é uma ferramenta de construçã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.
Projetos Vue podem ser rapidamente inicializados com Vite ao executar os seguintes comandos no seu terminal:
Com npm:
# npm 6.x
$ npm init vite@latest <nome-do-projeto> --template vue
# npm 7+, é necessário um traço duplo extra:
$ npm init vite@latest <nome-do-projeto> -- --template vue
$ cd <nome-do-projeto>
$ npm install
$ npm run dev
2
3
4
5
6
7
8
9
Ou com Yarn:
$ yarn create vite <nome-do-projeto> --template vue
$ yarn create vite-app <nome-do-projeto>
$ cd <nome-do-projeto>
$ yarn
$ yarn dev
2
3
4
5
Ou com pnpm:
$ pnpm create vite <nome-do-projeto> -- --template vue
$ cd <nome-do-projeto>
$ pnpm install
$ pnpm dev
2
3
4
# Esclarecimento sobre as diferentes Distribuições
No diretório dist/
do pacote npm (opens new window), você encontrará diversas distribuições (builds) do Vue.js. A seguir, temos uma visão geral de qual arquivo de dist
você deve utilizar, dependendo do seu caso de uso:
# Utilizando a partir de uma CDN ou sem um Empacotador
# vue(.runtime).global(.prod).js
:
- Para uso direto no navegador, através de
<script src="...">
, ao expor uma variável Vue global. - Compilação de templates diretamente no navegador:
vue.global.js
é a distribuição (build) "completa", que inclui compilador e runtime, a fim de dar suporte à compilação de templates sob demanda.vue.runtime.global.js
possui apenas o runtime e exige templates pré-compilados.
- 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.
- 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.
Note
Distribuições globais (global builds) não são distribuições UMD (opens new window). Elas são geradas como IIFEs (opens new window) e são destinadas apenas para uso direto através de <script src="...">
.
# vue(.runtime).esm-browser(.prod).js
:
- Para uso através de importação ES modules nativa (no navegador, através de
<script type="module">
). - 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.
# Utilizando a partir de um Empacotador
# vue(.runtime).esm-bundler.js
:
- Para uso de empacotadores, como
webpack
,rollup
eparcel
. - Gera distribuições de produção e desenvolvimento a partir de
process.env.NODE_ENV guards
(deve ser substituído pelo empacotador) - Não inclui distribuições (builds) minificadas (a fim deste processo ser realizado junto do resto do código, pelo empacotador)
- Importa dependências (por exemplo,
@vue/runtime-core
,@vue/runtime-compiler
)- 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
) - 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.
- 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,
- Compilação de template diretamente no navegador:
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 emmodule
nopackage.json
), uma vez que, normalmente, já pré-compilam os templates do projeto (por exemplo, arquivos*.vue
)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)
# Para Renderização no lado do Servidor
# vue.cjs(.prod).js
:
- Para renderização no lado do servidor, em Node.js, via
require()
. - Esta é a distribuição (build) que será carregada se você empacota sua aplicação com webpack utilizando
target: 'node'
e externalizandovue
apropriadamente. - Os arquivos de desenvolvimento e produção são previamente gerados, mas o arquivo mais apropriado é automaticamente adquirido baseado em
process.env.NODE_ENV
.
# Runtime + Compilador vs. somente Runtime
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:
// isto requer o compilador
Vue.createApp({
template: '<div>{{ hi }}</div>'
})
// isto não requer o compilador
Vue.createApp({
render() {
return Vue.h('div', {}, this.hi)
}
})
2
3
4
5
6
7
8
9
10
11
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.