O artigo a seguir tem o objetivo de apresentar a Vue UI – uma interface gráfica de usuário que permite criar, atualizar e gerenciar todos os aspectos de seus projetos, um recurso disponível a partir do Vue CLI 3.

É destinado principalmente para devs Vuejs que têm interesse em conhecer uma alternativa para gerenciar seus projetos através de uma interface gráfica.

Vue CLI

Você que é dev Vuejs já deve ter usado ou ter ouvido falar do Vue CLI, mas caso ainda não saiba, o CLI (@vue/cli) é um pacote npm instalado globalmente e fornece o vue comando em seu terminal.

Vue CLI fornece um sistema completo para o rápido desenvolvimento do Vue.js. Isso significa que faz muito do trabalho tedioso por nós e nos fornece recursos valiosos prontos para o uso.

1. Instalando o Vue CLI

Conforme falamos, para ter acesso ao recurso vue ui, precisamos ter o vue cli 3. Para isso, vamos instalar o vue cli:

npm install -g @vue/cli

Depois verifique se está com a versão correta.  Na data de publicação deste artigo eu estava usando a versão 3.7.0.

vue cli --version

Agora você já tem acesso ao recurso Vue UI. Para abri-lo, basta que você digite no seu terminal o seguinte comando:

vue ui

Isso fará com que ele abra automaticamente em seu navegador no endereço http://localhost:8000/project/select.

2. Criando seu primeiro projeto

A interface é bastante intuitiva. Para criar um novo projeto, basta clicar no botão “Criar”. Você consegue navegar entre os níveis de pastas, escolhendo onde deseja criar seu novo projeto.

3. Detalhes do projeto

Depois que você definiu onde quer criar seu projeto, você vai estar na fase de detalhes do projeto. A primeira coisa a se fazer é definir o nome do projeto.

Depois, você precisa definir quem vai gerenciar seus pacotes. No meu caso vou optar pelo npm.

Ele também dará a opção de inicializar o repositório git e definir a mensagem do seu commit inicial. Depois disso, clique em “Seguinte“.

4. Escolhendo os presets

Depois de passar pela etapa de detalhes, vamos para a etapa presets. Conforme a própria Vue UI descreve, um preset é um conjunto de plugins e configurações predefinidos.

Depois de selecionar as funcionalidades, poderá guardá-las como um preset para usar em projetos futuros, sem ter que configurar tudo de novo.

Neste caso, optarei pela opção manual para selecionarmos as funcionalidades manualmente, mas se no seu caso for suficiente, você pode optar pela opção Preset default, que contém o babel e o eslint, ou ainda selecionar um preset remoto a partir de um repositório git.

5. Funcionalidades

Aqui você vai habilitar todas as funcionalidades que você precisa em seu projeto, e depois clicar em “Seguinte“.

6. Configuração

Depois de habilitar todas as funcionalidades que você precisa, você será apresentado à aba final, chamada “Configuração“.

No meu caso, como ativei apenas “Babel” e o “Linter”, na minha tela “Configuração” terá apenas a escolha da configuração do Linter.

No meu caso, optei pelo ESLint + Prettier.

Depois que você clicar em “Criar Projeto”, você será perguntado se deseja salvar como um novo preset.

Se optar por salvar, precisa dar um nome. Caso não queira salvar, pode escolher a opção “Continuar sem guardar”.

Perfeito! Seu projeto está sendo criado!

Se você der uma olhada no seu terminal, verá a “mágica” acontecer.

7. Navegando pelo painel de controle

Depois que o seu projeto estiver criado, você será apresentado ao Painel de controle.

Tarefas

A interface do usuário te dá o poder de alterar as configurações, como executar tarefas, como a tarefa de serviço que executamos anteriormente no terminal. A diferença aqui é que obtemos muito mais informações sobre o que está acontecendo com essa tarefa.

Abaixo estamos servindo a aplicação:

Neste outro exemplo faremos o build.

Se você for até a pasta do projeto, verá que ele gerou a pasta dist com o build.

Também podemos executar o Lint e validar o código. Neste caso, não tivemos erros!

E a última tarefa que executaremos é a inspect, que usamos para inspecionar a configuração do webpack dentro do projeto do Vue CLI.

Plugins

Você também pode adicionar plugins ao seu projeto a partir da Vue UI, o que torna muito simples adicionar uma biblioteca.

Adicionei o plugin do cypress, uma ferramenta de testes e2e. Se quiser saber mais, pode dar uma olhada nesse meu artigo.

Finalizando a instalação você já pode fazer um commit com essa alteração. Bacana, né?

8. Importando um projeto

Se você precisar importar um projeto que você não criou originalmente a partir da UI do Vue, você pode prontamente fazer isso na aba Importar do Gerenciador de projetos. Para isso, basta localizar seu projeto e clicar em “Importar esta pasta“.

Note que ele identifica os projetos que são Vuejs com o ícone do Vue.

9. Configurando seu projeto

A Vue UI permite que você modifique a configuração do seu projeto depois de sua criação.

Para fazer isso, clique no ícone de configuração no submenu à esquerda, e será apresentada a configuração atual do Vue CLI:

10. Projetos importados

Nessa aba ficam todos os projetos que foram criados ou importados para a Vue UI. Neste caso, criamos apenas um projeto e não importamos nenhum.

11. Customização

A UI ainda te dá a possibilidade de personalizar seu dashboard.

Você pode, por exemplo, adicionar tasks, adicionar as noticias oficiais do Vue e deixar da maneira mais útil pra você!

Conclusão

Chegamos ao final do artigo e conseguimos conhecer a Vue UI que, sem dúvidas, é uma ferramenta muito útil e promissora.

Para quem já tem alguma familiaridade com o Vuejs, com certeza não terá nenhum problema em usar essa poderosa ferramenta.

Se esse artigo foi útil, compartilhe e ajude a chegar em mais pessoas.

Artigos anteriores que podem ser úteis para você:

• Cypress + Vuejs – Primeiros passos
• Criando uma aplicação Vue.js com o sistema de autenticação Firebase
• Aumente o desempenho da sua aplicação Angular utilizando Lazy Load para imagens
• Use Git com a interface gráfica do Visual Studio Code e aumente sua produtividade
• Integrando Firebase no seu aplicativo Ionic
• Firebase Analytics para Ionic Apps