Como Instalar Vue.JS no Ubuntu 22.04

Vue.js é um framework JavaScript usado para criar uma interface de usuário interativa e aplicações de página única. É mais leve e mais adaptável do que o framework AngularJS. É simples, flexível, modular, altamente performático, fácil de aprender e fornece muitas ferramentas e bibliotecas que facilitam o desenvolvimento de aplicações. Se você conhece HTML, CSS e JavaScript básicos, pode começar rapidamente a construir aplicações web com Vue.js.

Este guia mostrará como instalar o Vue JS no Ubuntu 22.04.

Pré-requisitos

• Um servidor rodando Ubuntu 22.04 para HAProxy.
• Uma senha de root configurada em todos os servidores.

Instalar Node.js

Antes de começar, você precisará instalar o Node.js em seu servidor. Por padrão, a versão mais recente do Node.js não está incluída no repositório padrão do Ubuntu 22.04. Portanto, você precisará instalá-lo a partir do repositório de origem do Node.

Primeiro, instale as dependências necessárias usando o seguinte comando:

apt install curl gnupg2 gnupg git wget -y

Em seguida, adicione o repositório de origem do Node usando o seguinte comando:

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

Uma vez que o repositório foi adicionado, você pode instalar o Node.js com o seguinte comando:

apt install nodejs -y

Uma vez que o Node.js está instalado, você pode verificar a versão do Node.js usando o seguinte comando:

node --version

Você receberá a seguinte saída:

v16.16.0

Agora, atualize o NPM para a versão mais recente usando o seguinte comando:

npm install npm@latest -g

Você também pode verificar a versão do NPM com o seguinte comando:

npm --version

Você deve receber a seguinte saída:

8.13.2

Instalar Vue CLI

Agora você pode usar o NPM para instalar o pacote Vue CLI usando o seguinte comando:

npm install -g @vue/cli

Uma vez que o Vue está instalado, você pode verificar a versão do Vue JS usando o seguinte comando:

vue --version

Você deve ver a seguinte saída:

@vue/cli 5.0.8

Criar um Aplicativo Simples com Vue JS

Agora você pode usar o Vue CLI para facilmente criar sua aplicação. Execute o seguinte comando para criar uma aplicação de exemplo chamada myapp.

vue create myapp

Você receberá a seguinte saída:

Vue CLI v5.0.8
?  Criando projeto em /root/myapp.
????  Inicializando repositório git...
??  Instalando plugins CLI. Isso pode levar um tempo...


adicionado 848 pacotes, e auditados 849 pacotes em 24s

88 pacotes estão procurando financiamento
  execute `npm fund` para detalhes

encontradas 0 vulnerabilidades
????  Invocando geradores...
????  Instalando dependências adicionais...


adicionado 95 pacotes, e auditados 944 pacotes em 6s

98 pacotes estão procurando financiamento
  execute `npm fund` para detalhes

encontradas 0 vulnerabilidades
?  Executando ganchos de conclusão...

????  Gerando README.md...

????  Projeto myapp criado com sucesso.
????  Comece com os seguintes comandos:

 $ cd myapp
 $ npm run serve

 WARN  Commit git ignorado devido à falta de nome de usuário e email na configuração do git, ou falha ao assinar o commit.
       Você precisará realizar o commit inicial você mesmo.

Em seguida, mude o diretório para o myapp e liste todos os arquivos e diretórios instalados usando o seguinte comando:

cd myapp  
ls

Você receberá a seguinte saída:

babel.config.js  jsconfig.json  node_modules  package.json  package-lock.json  public  README.md  src  vue.config.js

Iniciar Aplicação Vue JS

Agora você pode iniciar sua aplicação Vue JS executando o seguinte comando:

npm run serve

Uma vez que a aplicação esteja iniciada, você receberá a seguinte saída:

> [email protected] serve
> vue-cli-service serve

 INFO  Iniciando servidor de desenvolvimento...

 DONE  Compilado com sucesso em 6469ms                                                                                              8:45:33 AM

  Aplicativo rodando em:
  - Local:   http://localhost:8080/ 
  - Rede: indisponível

  Note que a versão de desenvolvimento não está otimizada.
  Para criar uma versão de produção, execute npm run build.

Acessar Interface Web do Vue JS

Neste ponto, a aplicação Vue JS está instalada e escuta na porta 8080. Você pode agora abrir seu navegador web e acessar a aplicação Vue JS usando a URL http://seu-ip-do-servidor. Você deve ver o painel do Vue JS na seguinte página:

Conclusão

Neste post, explicamos como instalar o Vue JS no Ubuntu 22.04. Agora você pode começar a construir sua aplicação de página única usando o framework Vue JS. Sinta-se à vontade para me perguntar se você tiver alguma dúvida.