You are currently viewing Como criar projeto Vue3

Como criar projeto Vue3

Introdução

O Vue3 é a terceira versão do framework VueJS que é um framework Javascript open source muito versátil e muito utilizado no mercado.

É um framework modular, de fácil aprendizagem e com ele você pode criar desde aplicações pequenas até aplicações de grande escala.

Existem algumas formas de fazer a criação do projeto Vue, vou mostrar como fazer utilizando o vue-cli.

Vue-cli

O vue-cli é uma ferramenta de linha de comandos que foi criada pela comunidade do VueJS para facilitar a criação de projetos.

Ela pode criar aplicações com configurações pré definidas ou também você pode selecionar quais configurações deseja.

Instalar/atualizar vue-cli

Caso você não tenha o vue-cli instalado, você pode fazer a instalação com o comando:

npm install -g @vue/cli
# ou
yarn global add @vue/cli
# utilize somente um desses, eu prefiro trabalhar com o NPM

Caso você já tenha instalado, para utilizar o Vue3 você precisará ter o vue-cli na versão 4.5 ou maior.

Para verificar a versão do seu vue-cli, utilize o comando:

vue --version

E para atualizar o vue-cli para a versão mais recente use o comando:

npm update -g @vue/cli
# ou
yarn global upgrade --latest @vue/cli

Obs: se estiver utilizando linux pode precisar rodar esse comando com sudo.

Criar projeto Vue3

Para criar o projeto, no terminal utilize o comando:

vue create nome_do_projeto

Com esse comando vai aparecer uma lista de opções para você selecionar.

A opção “Default (Vue 3) ([Vue 3] babel, eslint)” irá trazer uma aplicação Vue3 pré configurada com babel e eslint. Assim que selecionar já irá começar o processo de instalação.

Caso você queira selecionar as opções que você deseja na aplicação, como por exemplo se você quer vue-router, vuex, typescript e outras opções, selecione “Manually select features”.

Dessa opção surgirá outras novas, você precisa deixar marcado “Choose Vue Version” para selecionar a versão do Vue, e depois você poderá selecionar Vue3.

Você pode ir navegando com as setas entre as opções, e para marcar uma opção desejada, utilize o espaço.

Após selecionar todas as opções o vue-cli começará a configurar o projeto, essa etapa pode demorar.

Depois de todo o tempo de espera você pode entrar no diretório do projeto e rodar ele normalmente:

cd nome_do_projeto
 npm run serve
# ou
yarn serve

E pronto, você já terá um projeto zerado com o Vue na versão 3 para utilizar.

Em breve irei trazer mais conteúdos sobre o Vue3.

Para ver outros canais onde o posto conteúdo sobre HTML, CSS e Javascript, veja os Links do Programando Soluções.

Conclusão

Com esse post você aprendeu a criar um projeto com o Vue3 e com isso você consegue utilizar as novas features do framework.

Referências

https://v3.vuejs.org/guide/installation.html#cli
https://ichi.pro/pt/criando-seu-primeiro-projeto-vue3-um-tutorial-vue-135909568102813
https://blog.geekhunter.com.br/vue-js-so-vejo-vantagens-e-voce/
https://medium.com/trainingcenter/criando-um-projeto-vuejs-com-o-vuecli-e-webstorm-58b695339c01#:~:text=Vue%20CLI%20%C3%A9%20uma%20ferramenta,tempo%20de%20configura%C3%A7%C3%A3o%20de%20ambiente.

Este conteúdo te ajudou de alguma forma?