Pré-requisitos

🔍 Preview

Antes de iniciar o desenvolvimento do Store Theme, é necessário preparar o ambiente local com algumas ferramentas básicas. Esses pré-requisitos garantem compatibilidade com o projeto exemplar da Uappi e com o ecossistema do Vue.js 3.

🟢 Node.js

📦 Versões suportadas

Conforme a documentação oficial do Vue.js:

1Node.js ^20.19.0 || >= 22.12.0

🔄 Recomendação: usar NVM

Com o NVM você pode:

• Alternar entre múltiplas versões do Node.js
• Manter compatibilidade entre projetos diferentes
• Evitar conflitos de ambiente

Instalação do NVM Siga a documentação oficial conforme o seu sistema operacional:

• Windows
• Linux / macOS

Após instalar o NVM, instale uma versão compatível do Node.js:

1nvm install 22
2nvm use 22

🧩 Gerenciador de pacotes

Com o Node.js instalado, você já terá acesso ao npm, utilizado para:
• Instalar dependências do projeto
• Rodar scripts de desenvolvimento e build

> 📌 Não é necessário instalar nada adicional neste momento.

🌱 Git

Todo projeto da Uappi é versionado e distribuído através do GitLab da própria plataforma.

Por isso, é obrigatório ter o Git instalado para:

• Clonar o repositório do Store Theme
• Atualizar o código
• Trabalhar com branches e versionamento

Instalação do Git Siga a documentação oficial:

https://git-scm.com/downloads

Após a instalação, valide no terminal:

1git --version

🧠 Editor recomendado

🟣 Visual Studio Code (VS Code)

Embora seja possível usar outros editores, recomendamos fortemente o VS Code por conta da integração com Vue, TypeScript e ferramentas de lint/format.

Ele garante:

• Melhor DX (Developer Experience)
• Menos erros de sintaxe
• Padronização entre equipes

📦 Download

🟠 Extensões recomendadas (VS Code)

Essas extensões são altamente recomendadas para manter padrão de código, produtividade e qualidade.

🔹 ESLint

• Validação de regras
• Identificação de erros em tempo real
• Padronização entre projetos

🔹 Prettier

• Formatação automática de código
• Evita discussões de estilo no time
• Mantém consistência visual

🔹 Vue (Official)

• Suporte oficial ao Vue 3
• IntelliSense
• Tipagem, templates e reatividade

🔹 CSS Variable Autocomplete

• Autocomplete de variáveis CSS
• Ideal para temas, tokens e customização visual

✅ Checklist rápido

Antes de seguir, confirme se você tem:
• ✔️ NVM instalado
• ✔️ Node.js compatível ativo (^20.19.0 || >= 22.12.0)
• ✔️ Git instalado e funcionando

🏁 Próximo passo

Com o ambiente pronto, agora é hora de obter o projeto Store Theme da Uappi e rodá-lo localmente.

Rodando o projeto localmente: clonando, instalando dependências e subindo o ambiente local

Nesse próximo passo, vamos:

• Clonar o repositório no GitLab da Uappi
• Instalar dependências
• Subir o ambiente local de desenvolvimento