Introdução Rápida ​

Experimente a Vue Online ​

• Para ter um gosto da Vue rapidamente, podes experimentá-la diretamente na nossa Zona de Testes.

• Se preferires uma configuração de HTML simples sem etapas de construção, podes utilizar este JSFiddle como teu ponto de partida.

• Se já estiveres familiarizado com a Node.js e o conceito de ferramentas de construção, também podes experimentar uma configuração de construção completa diretamente de dentro do teu navegador no StackBlitz.

Criando uma Aplicação de Vue ​

Nesta seção introduziremos como estruturar uma Aplicação de Página Única de Vue na tua máquina local. O projeto criado estará utilizando uma configuração de construção baseada na Vite, e permite-nos utilizar os Componentes de Ficheiro Único de Vue.

Certifica-te de tens uma versão atualizada da Node.js instalada, depois execute o seguinte comando na tua linha de comando (sem o sinal >):

> npm init vue@latest

Este comando instalará e executará create-vue, a ferramenta oficial de estruturação de projeto de Vue. Tu serás presenteado com uma lista com um número de funcionalidades opcionais tais como TypeScript e suporte a testes:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Se estiveres inseguro a respeito de uma opção, por agora simplesmente escolha No pressionando a tecla enter. Uma vez que o projeto estiver criado, siga as instruções para instalar as dependências e iniciar o servidor de desenvolvimento:

> cd <your-project-name>
> npm install
> npm run dev

Agora deves ter o teu primeiro projeto em Vue executando! Nota que os componentes de exemplo no projeto gerado estão escritos utilizando a API de Composição e <script setup>, no lugar da API de Opções. Cá estão algumas dicas adicionais:

• A configuração de ambiente de desenvolvimento integrado recomendada é Visual Studio Code + a extensão Volar. Se utilizas outros editores, consulte a seção de suporte de IDE.
• Mais detalhes do ferramental, incluindo integração com abstrações de backend, são discutidas no Guia de Ferramental.
• Para aprender mais a respeito de ferramenta de construção subjacente Vite, consulte a documentação de Vite.
• Se escolheres utilizar a TypeScript, consulte a Guia de Utilização de TypeScript.

Quando estiveres pronto para enviar a tua aplicação para produção, execute o seguinte:

> npm run build

Isto criará a construção pronta para produção da tua aplicação no diretório .dist/ do projeto. Consulte o Guia de Implementação de Produção para aprender mais a respeito do envio da tua aplicação para produção.

Próximos passos >

Utilizando a Vue a partir da CDN ​

Tu podes utilizar a Vue diretamente a partir de uma rede de entrega de conteúdo através dum marcador de script:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Cá estamos utilizando unpkg, mas também podes utilizar qualquer CDN que sirva pacotes de npm, por exemplo jsdelivr ou cdnjs. Claro, também podes descarregar este ficheiro e servi-lo tu mesmo.

Quando estiveres utilizando a Vue a partir de um CDN, não existe "etapa de construção" envolvida. Isto torna a configuração muito mais simples, e é adequado para a otimização da HTML estática ou integração com uma abstração de backend. No entanto, não serás capaz de utilizar a sintaxe de Componente de Ficheiro Único.

Utilizando a Construção Global ​

A ligação acima está carregando a construção global de Vue, onde todas APIs de alto nível estão expostas como propriedades sobre o objeto Vue global. Cá está um exemplo completo de utilização da construção global:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Demonstração do JSFiddle

Utilizando a Construção de Módulo de EcmaScript ​

Ao longo do resto da documentação, estaremos essencialmente utilizando a sintaxe de módulos de ECMAScript. Agora a maioria dos navegadores suportam os módulos de EcmaScript de maneira nativa, assim a podemos utilizar a Vue a partir de um CDN através dos módulos de EcmaScript desta maneira:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Repara que estamos utilizando <script type="module">, e a URL do CDN importado está apontando para a construção de módulos de EcmaScript da Vue.

Demonstração de JSFiddle

Ativando os Mapas de Importação ​

No exemplo acima estamos importando a partir de um URL de CDN completa, mas no resto da documentação verás o código desta maneira:

import { createApp } from 'vue'

Nós podemos instruir o navegador sobre onde localizar a importação de vue utilizando Mapas de Importação:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Demonstração de JSFiddle

Tu também podes adicionar entradas para outras dependências ao mapa de importação - mas certifica-te de que eles apontam para as versões de módulos de EcmaScript da biblioteca que tencionas utilizar.

Dividindo os Módulos ​

A medida que mergulhamos mais fundo no guia, poderemos precisar dividir o nosso código para dentro de ficheiros de JavaScript separados para que eles sejam mais fáceis de gerir. Por exemplo:

<!-- index.html -->
<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

Se abrires o index.html acima diretamente no teu navegador, descobrirás que ela lança um erro porque os módulos de EcmaScript não podem funcionar sobre o protocolo file://. Para isto funcionar, precisas servir o teu index.html sobre o protocolo http://, com um servidor de HTTP local.

Para iniciar um servidor de HTTP local, primeiro instale a Node.js, e depois execute npx serve a partir da linha de comando no mesmo diretório onde o teu ficheiro HTML está. Tu também podes utilizar qualquer outro servidor de HTTP que pode servir os ficheiros estáticos com os tipos de MIME corretos.

Tu podes ter notado que o modelo de marcação do componente importado está em linha como uma sequência de caracteres de JavaScript. Se estiveres utilizando o VSCode, podes instalar a extensão es6-string-html e prefixar as sequências de caracteres com um comentário /*html*/ para obteres o destacamento de sintaxe para elas.

Utilizando a API de Composição sem uma Etapa de Construção ​

Muitos dos exemplos para API de Composição estarão utilizando a sintaxe <script setup>. Se tencionas utilizar a API de Composição sem uma etapa de construção, consulte a utilização da opção setup().

Próximos Passos ​

Se saltaste a Introdução, recomendamos fortemente a leitura dela antes de avançar para o resto da documentação.