Formas de Criar um Projeto Vue.js

IzaTec Play - SETUP Vue.js

Vue.js é um framework progressivo para construção de interfaces de usuário. Existem várias formas de iniciar um projeto com Vue, desde uso direto via CDN até setups modernos com ferramentas como Vue CLI e Vite.

1. CDN (sem build)

Ideal para protótipos rápidos ou pequenos projetos. Não requer instalação de ferramentas.

Exemplo:

<!DOCTYPE html>
<html>
<head>
  <title>Vue com CDN</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ mensagem }}</div>

  <script>
    const { createApp } = Vue
    createApp({
      data() {
        return { mensagem: 'Olá Vue via CDN!' }
      }
    }).mount('#app')
  </script>
</body>
</html>

2. Vue CLI

Ferramenta oficial para criar projetos Vue completos com configuração pré-definida.

Instalação:

npm install -g @vue/cli
vue create meu-projeto
cd meu-projeto
npm run serve

Vantagens:

Scaffold completo
Suporte a plugins
Ideal para projetos maiores

3. Vite

Vite é a forma mais moderna e recomendada de iniciar projetos Vue. É rápido, leve e usa ES Modules nativamente.

Instalação:

npm create vite@latest meu-projeto -- --template vue
cd meu-projeto
npm install
npm run dev

Vantagens:

Inicialização e HMR rápidos
Configuração simples
Ótimo para dev moderno

Conclusão

Método	Quando Usar	Complexidade	Performance
CDN	Protótipos, testes rápidos	Muito baixa	Baixa
Vue CLI	Projetos estruturados maiores	Média	Média
Vite	Projetos modernos e performáticos	Baixa	Alta

Exemplo

Perfeito! Abaixo segue um exemplo de componente simples com Composition API, que pode ser adaptado facilmente para uso via CDN, Vue CLI e Vite. O exemplo coleta nome e e-mail, e ao submeter exibe um alert() com a mensagem personalizada.

🌐 1. Exemplo para CDN

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
  <meta charset="UTF-8">
  <title>Vue via CDN - Options API</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <form @submit.prevent="enviarFormulario">
    <label>Nome: <input v-model="nome" /></label><br>
    <label>Email: <input v-model="email" type="email" /></label><br>
    <button type="submit">Enviar</button>
  </form>
  </div>

  <script>
    const { createApp } = Vue

    createApp({
    data() {
    return {
        nome: '',
        email: ''
    }
  },
    methods: {
        enviarFormulario() {
            alert(`Olá ${this.nome}, obrigado por se candidatar em nossa vaga Dev Jr Vue.js, acabamos de enviar o email com instruções para ${this.email}.`)
        }
    }
  }).mount('#app')
  </script>
</body>
</html>

Vue CLI ou Vite

Crie um componente Formulario.vue:

<template>
  <form @submit.prevent="enviarFormulario">
    <label>Nome: <input v-model="nome" /></label><br />
    <label>Email: <input v-model="email" type="email" /></label><br />
    <button type="submit">Enviar</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'

const nome = ref('')
const email = ref('')

const enviarFormulario = () => {
  alert(`Olá ${nome.value}, obrigado por se candidatar em nossa vaga Dev Jr Vue.js, acabamos de enviar o email com instruções para ${email.value}.`)
}
</script>

<style scoped>
form {
  display: flex;
  flex-direction: column;
  width: 300px;
}
input, button {
  margin-top: 8px;
}
</style>

Para usar no projeto:

Vue CLI: importe e registre no App.vue ou onde desejar.
Vite: mesmo processo, com setup moderno (já funciona direto com <script setup>).

Hands-on

🎉 Avaliação do Evento Vue.js 🎉

Diretivas

Diretivas são atributos especiais no HTML

Setup