QNumber 🎲

⚠️ Projeto de intuito educacional. Este repositório foi criado para fins de estudo e prática de Vue 3, TypeScript e Vite, não sendo destinado a uso em produção.

Um gerador de números aleatórios simples, construído com Vue 3, TypeScript e Vite. O usuário escolhe uma quantidade de números e um intervalo (mínimo e máximo), e a aplicação sorteia os valores na tela.

🎯 Objetivo

Este projeto serve como material de estudo para quem está aprendendo:

• Componentes de página (views) e roteamento com Vue Router
• Reatividade com a Composition API (ref, v-model)
• Estruturação de um projeto Vue com TypeScript
• Boas práticas de organização de pastas (components/pages, components/views, router, assets)

🛠️ Tecnologias

• Vue 3 (Composition API + <script setup>)
• TypeScript
• Vite
• Vue Router
• Prettier para formatação de código

📁 Estrutura do projeto

src/
├── App.vue                  # Componente raiz (Header + RouterView + Footer)
├── main.ts                  # Ponto de entrada da aplicação
├── style.css                 # Estilos globais
├── router/
│   └── index.ts              # Definição das rotas
├── components/
│   ├── pages/                # Componentes de página (rotas)
│   │   ├── LandingPage.vue
│   │   ├── Generator.vue     # Tela principal do gerador de números
│   │   └── About.vue
│   └── views/                # Componentes reutilizáveis de layout
│       ├── Header.vue
│       └── Footer.vue
└── assets/                   # Imagens e ícones

🚀 Como rodar o projeto

Pré-requisito: Node.js instalado.

# instalar as dependências
npm install

# rodar em modo de desenvolvimento
npm run dev

# gerar build de produção
npm run build

# pré-visualizar o build de produção
npm run preview

🔍 Como funciona o gerador (Generator.vue)

O coração do projeto está na função generatorNumber, dentro de src/components/pages/Generator.vue:

function generatorNumber() {
  numbers.value = []; // limpa a lista antes de gerar novos números
  for (let i = 0; i < quantity.value; i++) {
    // fórmula para gerar um número inteiro aleatório entre n_min e n_max
    const randNumber = Math.floor(Math.random() * (n_max.value - n_min.value + 1) + n_min.value);
    numbers.value.push(randNumber);
  }
  text.value = numbers.value.join(' , '); // transforma a lista em texto exibível
}

• Math.random() gera um decimal entre 0 (inclusive) e 1 (exclusive).
• Multiplicar por (n_max - n_min + 1) ajusta o intervalo de possibilidades.
• Somar n_min desloca o resultado para começar no valor mínimo desejado.
• Math.floor() arredonda para baixo, garantindo um número inteiro.

📄 Licença

Projeto livre para fins de estudo e aprendizado.