Nível 0 – Pré-requisitos
Antes de mergulhar no Vue, é fundamental ter uma base sólida em:
1. HTML/CSS
- Estrutura de páginas, seletores CSS, Flexbox, Grid, animações básicas.
2. JavaScript
- Variáveis (let, const), tipos de dados, funções, arrow functions, arrays, objetos.
- DOM: document.querySelector, addEventListener, manipulação de elementos.
- ES6+: destructuring, spread/rest, template literals, módulos (import/export).
- Conceitos de programação reativa e assíncrona: Promises, async/await.
3. NPM/Yarn e Node.js
- Instalar pacotes, rodar scripts, criar projetos básicos.
4. Git
- Versionamento, commits, branches.
💡 Dica: se você ainda não domina JS moderno, passe um tempo reforçando antes do Vue.
Nível 1 – Conceitos básicos do Vue.js
Objetivo: entender como Vue funciona, sem se preocupar com grandes apps ainda.
1. Introdução ao Vue
- O que é Vue.js e para que serve.
- Comparação com React e Angular (opcional, para contexto).
- CDN vs CLI (npm init vue@latest).
2. Instalação e configuração
- Criar um projeto Vue com Vite (mais rápido que Vue CLI).
3. Estrutura de um projeto Vue
- main.js, App.vue, componentes.
4. Template Syntax
- {{ }} para interpolação.
- Diretivas: v-if, v-else, v-for, v-show.
- Eventos: v-on / @click.
- Bindings: v-bind / : e v-model.
5. Reatividade
- ref e reactive.
- Computed properties e watchers.
6. Componentes
- Criação de componentes simples.
- Props e comunicação pai-filho.
- Slots básicos.
📌 Exercício: criar uma lista de tarefas (To-Do List) usando v-for, v-if e v-model.
Nível 2 – Vue intermediário
Objetivo: dominar a arquitetura de aplicativos Vue.
1. Componentes avançados
- Slots nomeados e scoped slots.
- Emissão de eventos personalizados (emit).
2. Composição API vs Options API
- Entender setup(), ref, reactive, computed, watch.
- Comparar com a Options API (data, methods, computed).
3. Diretivas personalizadas
- Criar v-focus, v-tooltip, etc.
4. Formulários
- v-model com objetos e arrays.
- Validação básica de formulários.
5. Eventos
- Modificadores (.prevent, .stop, .capture).
6. Transições e animações
- transition, transition-group.
7. Gerenciamento de estado local
- Lidar com estados dentro de componentes.
8. Roteamento
- Instalar e configurar Vue Router.
- Rotas, rotas aninhadas, rotas dinâmicas.
📌 Exercício: criar um mini blog com múltiplas páginas usando Vue Router.
Nível 3 – Vue avançado
Objetivo: criar aplicações robustas e escaláveis.
1. Gerenciamento de estado global
- Pinia (substituto moderno do Vuex).
- Criar stores, actions, getters.
2. Consumindo APIs
- fetch ou axios.
- Integração com back-end (CRUD).
3. Composição API avançada
- Reatividade profunda, toRefs, readonly.
- Composables (funções reutilizáveis de lógica de estado).
4. Performance
- Lazy loading de componentes.
- Suspense e async components.
5. Testing
- Unit testing com Vue Test Utils e Jest.
- E2E testing com Cypress ou Playwright.
6. Boas práticas
- Estrutura de pastas, modularização.
- Naming conventions.
- Linting com ESLint + Prettier.
📌 Exercício: criar um sistema de gerenciamento de tarefas com autenticação e persistência via API.
Nível 4 – Ecossistema e ferramentas avançadas
1. Vue CLI / Vite
- Scripts, hot reload, configuração de plugins.
2. Tailwind CSS / Vuetify / BootstrapVue
- Estilização rápida e responsiva.
3. SSR (Server Side Rendering)
- Nuxt.js (framework Vue para SSR e geração de sites estáticos).
4. PWA com Vue
- Progressive Web Apps.
5. Deploy
- Netlify, Vercel, Render, ou hospedagem própria.
📌 Exercício: criar um site estático com Nuxt.js + API externa + Tailwind.
Roadmap visual simplificado
Pré-requisitos
│
├─ HTML/CSS
├─ JavaScript moderno
├─ Node/NPM
└─ Git
Nível 1: Básico
│
├─ Vue CDN / CLI
├─ Template syntax
├─ Reatividade
└─ Componentes básicos
Nível 2: Intermediário
│
├─ Componentes avançados
├─ Composição API
├─ Diretivas custom
├─ Forms e eventos
├─ Transições
└─ Vue Router
Nível 3: Avançado
│
├─ Pinia / Vuex
├─ API integration
├─ Composables
├─ Performance
├─ Testing
└─ Boas práticas
Nível 4: Ecossistema
│
├─ Vite / CLI avançado
├─ Tailwind / Vuetify
├─ Nuxt.js (SSR)
├─ PWA
└─ Deploy
Top comments (0)