O objetivo deste Gist é mostrar como instalar a ferramenta vue-cli, assim como suas dependências, em sistemas baseados em Linux. Estou utilizando um Ubuntu 17.10, caso queira saber a versão do seu Ubuntu, execute a seguinte instrução no terminal:
lsb_release -a
O vue-cli é uma poderosa ferramenta de linha de comando que visa auxiliar a criação de projetos Vue.js. O vue-cli permite criar templates para diversos workflows, em poucos minutos, podemos ter uma aplicação rodando com diversas tarefas predefinidas, com live-reload e linter.
Os pré-requisitos para ter vue-cli são:
- Node
- NPM (Gerenciador de Pacotes do Node)
Caso você já tenha o node e npm instalados em sua máquina, pode pular para o tópico Instalando o vue-clie.
O grande problema é que, em distribuições baseadas em Debian, quando instalamos o node utilizando a versão disponibilizada no repositório oficial, usando o apt-get, ele irá instalar o node como nodejs, apesar de parecer besteira, uma simples nomenclatura pode quebrar tudo.
A minha recomendação é instalar o NVM (Node Version Manager), um script que gerencia diferentes versões do Node.js. O legal do NVM é que podemos ter mais de uma versão instalada do node na nossa máquina e ficar alterando entre elas.
Para instalar o NVM é preciso alguns pacotes de dependências que já estão no repositório de sua distribuição Debin Based. Para isso, execute os seguintes comandos:
sudo apt-get update
sudo apt-get install build-essential libssl-dev
Após executado o passo anterior, você já tem o necessário em seu sistema para instalar o NVM. Para isso, execute o passo abaixo:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
Dentro da URL, perceba o trecho v0.33.2, este é o número da versão que estou utilizando, sendo que, ela pode mudar com o tempo, então recomendo você acessar a seguinte página do projeto no GitHub e procurar pela nova versão:
https://github.com/creationix/nvm#installation
Após executar o passo anterior, o que está sendo feito é o download de um script e a execução do mesmo, tudo vai ser instalado em um diretório oculto na pasta do seu usuário, para este comando não é necessário utilizar o sudo.
Após o comando de instalação do NVM, é necessário fechar o terminal e abrí-lo novamente, pois o terminal (bash) precisa processar as alterações. Caso não queira fechar, ainda é possível rodar o seguinte comando:
source ~/.profile
Para verificar se o NVM foi instalado corretamente, execute o seguinte comando:
nvm --version
Caso ainda assim, o bash dê erro de command not found, execute o seguinte comando:
command -v nvm
E novamente, feche o terminal e abra-o novamente. Quando o NVM estiver devidamente instalado e o bash entendo o comando nvm, execute:
nvm ls-remote
Ele vai te exibir várias versões do Node. Eu escolhi a versão LTS mais recente, no momento em que estou escrevendo esse Gist, é a v8.9.1. Você pode instalá-la digitando:
nvm install v8.9.1
Caso você instale mais de uma versão e no futuro tenha necessidade de alternar entre elas utilize o comando:
nvm use -número da versão-
Agora vamos verificar a versão do Node para ter certeza que tudo foi instalado corretamente utilizando o comando:
node -v
Com a instalação do node, ganhamos de bônus o NPM. Mesmo assim, eu gosto sempre de ver se há alguma atualização para o NPM e instalá-la, neste caso, execute o seguinte comando:
npm i npm -g
O "problema" é que, toda vez que você ligar sua máquina, vai ser necessário setar a versão do Node que deseja utilizar. Para contornar esse problema, é possível setar uma versão do node como padrão (default) do sistema, assim, evita ter que utilizar o comando nvm use toda hora.
Para setar uma versão do node como padrão, execute o seguinte comando:
nvm alias default -número da versão-
Exemplo:
nvm alias default 8.9.1
Pronto, agora seu ambiente está pronto para a instalação do vue-cli.
Agora tudo ficou mais fácil, para instalar o vue-cli basta executar o seguinte comando:
npm install -g vue-cli
Nota:
- Pode ser necessário a permissão de administrador (o uso do sudo), por se tratar de um pacote global.
- No meu caso, por estar utilizando o NVM, não foi necessário a permissão de administrador.
Para verificar se o vue-cli está devidamente instalado, rode o seguinte comando:
vue --version
Caso deseje ver todos os templates que o vue-cli possui, basta rodar o seguinte comando: vue list
Para criar um novo projeto com o vue-cli, basta informar o seguinte:
vue init template nome-projeto-
Exemplo: vue init simple exemplo-basico-vue-simple
Como ele vai gerar um package.json para você, ele vai ter fazer algumas perguntas, a primeira é qual será o nome do projeto, por padrão, ele traz o nome da pasta que foi definido no comando anterior e depois ele pergunta qual é o autor deste projeto, que ele irá trazer por padrão o nome e e-mail definidos globalmente no Git.
Gostou?, dá um Star ⭐
❤️❤️❤️
Siga-me nas redes sociais:
Deixo meus créditos a este texto do Medium, que colaborou para este passo-a-passo: https://medium.com/collabcode/como-instalar-node-js-no-linux-corretamente-ubuntu-debian-elementary-os-729fb4c92f2d
Olá @ caueprado0, segui o seu tutorial porém quando eu vou usar vue --version apresenta a seguinte mensagem