Criando um projeto em VueJS com VueCLI e WebStorm
Em 2015, quando mudei do Netbeans para as IDEs da JetBrains, tive muita dificuldade em me ambientar com as mesmas, pois sua interface e funcionalidades fugiam muito da interface da minha antiga IDE, porém com o passar do tempo e com muitas pesquisas no Google eu consegui me virar e entender bem sobre o ambiente de desenvolvimento dessa IDE.
O objetivo deste post é criar um projeto simples com vue e vue-cli utilizando a IDE Webstorm da JetBrains.
Atenção: Este artigo partirá do princípio que você, caro leitor, já instalou o Webstorm, node e npm em seu computador.
VueJS
VueJS é uma framework front-end que facilita e acelera o desenvolvimento para aplicações web, ela é escrita em Javascript e tem uma ótima comunidade.
VueCLI
Vue CLI é uma ferramenta de linha de comando feita pela comunidade do Vue para facilitar ainda mais a inicialização de uma nova aplicação Vue, com ela podemos gerar nossa aplicação a partir de templates oficiais (incluindo integração com webpack, etc), diminuindo o tempo de configuração de ambiente.
Começando o projeto
Quando se abre o Webstorm pela primeira vez, você verá uma tela parecida como esta:
Do seu lado esquerdo, temos os projetos, e do lado direito, temos as opções gerais de criação de projetos juntamente com as configurações e o menu ajuda.
Ao clicar na opção “Create New Project” abrirá as opções para iniciar-se um novo projeto, abrindo a janela abaixo.
Escolheremos a opção “Empty Project” para criar um projeto vazio. No campo “Location” é onde salvaremos os arquivos e pastas de nosso projeto, por padrão o mesmo é salvo na pasta WebstormProjects/${nome_do_seu_projeto},
Após definir a pasta onde ficará os arquivos do seu projeto, clique em “Create”. Depois disso, o Webstorm apresentará uma interface como abaixo:
Essa é a interface que trabalharemos, a esquerda podemos ver onde ficará os arquivos e pastas do projeto e a direita vemos onde ficará o editor com os códigos. Por enquanto, é o que precisamos.
Agora é hora de começar o nosso projeto; a primeira coisa que teremos de fazer é instalar o VueCLI.
Aperte Alt+F12 no Windows/Linux e aparecerá um terminal já apontando para a pasta do seu projeto, como abaixo.
Para instalá-lo, basta digitar o comando
OBS: Lembrando que terá de ter instalado o node.js e o npm em sua máquina. Logo abaixo disponibilizei um link com um artigo bem legal para instalá-lo no linux.
https://tableless.com.br/como-instalar-node-js-no-linux-corretamente-ubuntu-debian-elementary-os/
$ npm install -g vue-cli
Este comando, instalará de forma global (-g) o vue-cli em seu computador, e a partir de agora, poderemos executar o script de inicialização de projeto pelo vue cli com o seguinte comando:
vue init <template-name> <project-name>
No template name, coloca-se o nome do template para ser utilizado, abaixo tem o link com os templates oficiais disponíveis.
Neste artigo, utilizaremos o template webpack, então nosso comando ficará assim:
$ vue init webpack example-project
Após digitar o comando, ele te perguntará algumas coisas como: nome do projeto, versão, autor, se quer testes automatizados ou não etc. E depois disso, o instalador começará a baixar os arquivos necessários.
Após terminar, o instalador gerará os arquivos e pastas na seguinte estrutura:
Os componentes terão de ser feitos na pasta ./src/components.
Para ver se nosso projeto funcionou, basta executar o comando:
$ npm run dev
Após o script compilar o projeto, o servidor será iniciado na porta 8080 (caso ela não esteja oculpada).
Acesse http://localhost:8080 e você poderá ver uma tela como essa.
Pronto, criamos nosso primeiro projeto VueJS com o Webstorm!
Conclusão
A criação de webapps com VueJS hoje é muito rápida, simples e prática. Em menos de 5 minutos já temos uma aplicação configurada e rodando.
Bom, se você está lendo isso, obrigado. Até a próxima pessoal, não esqueçam dos claps haha ❤
