Vue.js: o que é, como funciona e como começar a usar esse framework JS

Project name: (em português, “nome do projeto”) é onde você insere o nome do seu projeto. Evite usar caracteres especiais, como símbolos e espaços em branco;
Add TypeScript? (em português, “adicionar Typescript?”) Selecione No para trabalhar apenas com JavaScript ou Yes para usar TypeScript (use as setas do teclado para selecionar);
Add JSX Support? (em português, “adicionar suporte JSX?”) O JSX é usado apenas em casos raros e muito avançados. Selecione No para continuar;
Add Vue Router for Single Page Application development? (em português, “adicionar o roteador Vue para desenvolvimento de aplicação de uma página?”) Selecione Yes, caso precise adicionar navegação entre páginas da sua aplicação;
Add Pinia for state management? (em português, “adicionar Pinia para gerenciamento de estado”) Selecione Yes se precisar de gerenciamento de estados na sua aplicação;
Add Vitest for Unit Testing? (em português, “”adicionar Vitest para testes unitários?”) Selecione Yes apenas se você quiser efetuar testes unitários em sua aplicação com Vitest. Alternativamente, existem outras bibliotecas com o mesmo propósito, como Jest ou Vue Test Utils ;
Add End-to-End Testing Solution? (em português, “”adicionar solução para testes de ponta a ponta?”) Selecione Yes apenas se você quiser efetuar testes e2e em sua aplicação;
Add ESLint for code quality? (em português, “”adicionar ESLint para qualidade de código?”) O ESLint é um plugin que ajuda a manter boas práticas de código. Selecione Yes se quiser adicioná-lo ao projeto; Add Prettier for (em português, “”adicionar Prettier?”) O Prettier é um plugin que ajuda na organização do seu código. Selecione Yes se quiser adicioná-lo ao projeto (só aparece se você adicionar o ESLint);
Add Vue DevTools extension for debugging? (em português, “adicionar a extensão Vue DevTools para depuração?”) O Vue DevTools é uma ferramenta de depuração de código que também pode ser instalada como extensão no seu navegador. Selecione No para continuar.

<head>
  <!-- A CDN do Vue vem no elemento head do seu HTML -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<!-- No body, temos a interpolação {{ }} do Vue para mostrar o estado `message` -->
<body>  
  <div id="app">{{ message }}</div>
</body>
<!-- No script do nosso projeto, temos todas as propriedades do Vue.js expostas através do objeto global `Vue`. Aqui, criamos e montamos nossa aplicação através do `createApp` e do método `mount()` -->
<script>
  const { createApp } = Vue
  createApp({
    data() {
      return { message: 'Hello Vue!' }
    }
  }).mount('#app')
</script>

<template>
  <div>
    <h1>Olá, {{ nome }}!</h1>
    <p>Esse é um exemplo de componente Vue.</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const nome = ref('Mundo');
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({
    // Nome do estado e seu valor inicial
    contador: 0
  }),
  actions: {
    // função que modifica diretamente o valor do estado `contador`
    incrementar(){
      this.contador++
    }
  },
  getters: {
    // função que retorna o dobro do estado sem modificar seu valor original
    dobro: (state) => state.contador * 2
  }
})

Vue.js: o que é, como funciona e como começar a usar esse framework JS | Alura Cursos Online

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

angela-caldas

Inscreva-se em nossa Newsletter

O que é Vue.js?

Explore por tópico

Um breve histórico sobre Vue.js

Como funciona o Vue.js?

Quais as vantagens e desvantagens do Vue.js?

Vantagens do Vue.js

Simplicidade

Flexibilidade

Reatividade

Component-based Architecture (CBA)

Componentização e reaproveitamento

Desempenho

Excelente documentação

Desvantagens do Vue.js

Menor adoção em comparação com outros frameworks

Recursos extras limitados

Excesso de flexibilidade

Comunidade restrita

Como começar a usar o Vue.js?

Javascript

HTML e CSS

Guia de carreira Front-End | TechGuide

Quais são as diferenças do Vue.js em relação a outros frameworks?

Sintaxe e curva de aprendizado

Biblioteca vs Framework

Tamanho e performance

Para que tipos de site o Vue.js é indicado?

Como configurar o ambiente para usar Vue.js

Instale o Node.JS (Passo 1 de 3)

Instale o NPM (gerenciador de pacotes do Node.JS) (Passo 2 de 3)

Instale o Visual Studio Code (Passo 3 de 3)

Como implementar o Vue.js?

Crie o seu primeiro projeto no Vue.js

Inicie o seu projeto

Posso usar Vue sem Vite?

Propriedades e configurações do Vue.js

Anatomia de um componente Vue.js

Composition API vs Options API

Gerenciamento de estados com Pinia

Testes unitários e E2E

Vue Devtools

Conclusão

Como aprender a usar o Vue.js de forma gratuita?

Cursos da Alura sobre Vue.js

Leia também