Skip to content

Começar

Bem-vindo(a) ao tutorial da Vue!

O objetivo deste tutorial é dar-nos rapidamente uma experiência de como é trabalhar com a Vue, direto no navegador. O tutorial não tem como objetivo ser compreensivo, e não precisamos de entender tudo antes prosseguir. No entanto, depois de o completarmos, devemos certificar-nos que também leremos o Guia que cobre cada tópico com mais detalhes.

Pré-requisitos

O tutorial pressupõe familiaridade elementar com HTML, CSS e JavaScript. Se formos totalmente novos no desenvolvimento do front-end, pode não ser a melhor ideia saltar diretamente para uma abstração como nosso primeiro passo - devemos dominar os fundamentos e depois voltar! Experiência anterior com outras abstrações ajuda, mas não é obrigatória.

Como Usar Este Tutorial

Nós podemos editar o código a direitaabaixo e ver a atualização do resultado instantaneamente. Cada passo introduzirá uma funcionalidade principal da Vue, e seremos esperados para completar o código para termos a demonstração à funcionar. Se ficarmos preso, teremos um botão "Mostrar Solução" que revela o código em funcionamento para nós. Tente não depender muito disto - aprenderemos mais rápido compreendendo as coisas por nós mesmos.

Se formos programadores experientes vindos da Vue 2 ou outras abstrações, existem algumas configurações que podemos modificar para fazermos o melhor uso deste tutorial. Se formos iniciantes, é recomendado avançar com os padrões.

Detalhes da Configuração do Tutorial
  • A Vue oferece dois estilos de API: API de Opções e API de Composição. Este tutorial está desenhado para funcionar com ambas - podemos escolher o nosso estilo preferido usando os interruptores de Preferência de API acima. Saber mais sobre os estilos de API.

  • Nós também podemos trocar entre modo de Componente de Ficheiro Único ou modo de HTML. O primeiro mostrará os exemplos de código no formato de Componente de Ficheiro Único (SFC), o qual é o que a maioria dos programadores usa quando usam a Vue com uma etapa de construção. O modo de HTML mostra a uso sem uma etapa de construção.

DICA

Se estivermos prestes a usar o modo de HTML sem uma etapa de construção em nossas próprias aplicações, temos que certificar-nos de ou mudar as importações à:

js
import { ... } from 'vue/dist/vue.esm-bundler.js'

dentro dos nossos programas ou configurar a nossa ferramenta de construção para resolver a vue em conformidade. Configuração de exemplo para Vite:

js
// vite.config.js
export default {
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js'
    }
  }
}

Consultar a respetiva seção no guia do Ferramental por mais informação.

Pronto? Clique no "Próximo" para começar.

App.vue
Show Error
Auto Save
Tutorial has loaded