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 à:
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:
// 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.