Criar um aplicativo usando a CLI do Vue

• 7 minutos

Queremos criar um aplicativo para permitir que alguém faça reserve um cruzeiro para a Lua com nossa empresa fictícia Relecloud. Usaremos a CLI do Vue para inicializar o aplicativo.

Instalar a CLI do Vue

A CLI do Vue está disponível por meio do npm, a ferramenta de empacotamento que o Node.js usa. A ferramenta npm é instalada automaticamente quando você instala o Node.js. Para garantir que você tenha o npm e o Node.js instalados no sistema, abra uma janela de terminal ou de comando e execute os seguintes comandos:

node -v
npm -v

Para instalar a CLI do Vue, abra uma janela de comando ou de terminal e execute o seguinte comando:

npm install -g @vue/cli

A instalação da CLI do Vue no sistema leva alguns minutos.

Inicializar um aplicativo

A maneira mais rápida de inicializar um aplicativo Vue é por meio da CLI do Vue. Agora, criaremos um aplicativo inicial usando a CLI do Vue.

1. Em uma janela de comando ou de terminal, vá para uma pasta na qual você deseja armazenar o aplicativo.

2. Crie um aplicativo Vue executando o seguinte comando:

   vue create relecloud
   

3. Quando for solicitado, use as teclas de direção para ir até Selecionar recursos manualmente e selecione a tecla Enter.

   

4. Quando for solicitado que você forneça os recursos necessários para seu projeto, use as teclas de direção para ir até o Babel e selecione a Barra de espaços para desabilitá-lo. Em seguida, use as teclas de direção para ir até o Linter/Formatador e selecione a Barra de espaços para desabilitá-lo.

   

5. Selecione Enter para confirmar a escolha do recurso.

   Observação

   Para projetos de produção, você pode decidir adicionar mais recursos. Esses recursos estão fora do escopo deste módulo.

6. Quando for solicitado que você escolha uma versão do Vue.js, use as teclas de direção para acessar 3.x e pressione Enter.

   

7. Quando for solicitado que você escolha onde prefere colocar os arquivos de configuração, deixe a opção padrão Em arquivos de configuração dedicados e selecione Enter.

   

8. Quando for solicitado que você salve as informações como uma predefinição, selecione Enter para aceitar o padrão, que é Não.

Agora, o projeto será criado e as bibliotecas necessárias serão instaladas. O processo leva alguns minutos.

Explore o código

Vamos explorar o código que a CLI do Vue criou.

1. Quando a instalação for concluída, altere os diretórios para relecloud e abra-o no Visual Studio Code executando os seguintes comandos:

   cd relecloud
   code .
   

2. No Visual Studio Code, abra package.json.

3. vue está listado como uma dependência e @vue/cli-service está listado como um devDependency.

   Observação

   A parte @vue/cli-service é responsável por compilar o aplicativo e executar o servidor de desenvolvimento.

4. Observe os dois scripts:

   • O script serve iniciará o servidor de desenvolvimento.
   • O script build criará o JavaScript, HTML ou CSS quando você estiver pronto para publicar o projeto.

5. Abra public/index.html, que hospedará o aplicativo Vue.

6. Abra src/main.js e observe o código que importa App de App.vue.

7. Abra src/App.vue, que contém o componente principal que exploraremos na próxima unidade.

   Observação

   O Visual Studio Code pode oferecer um prompt com uma extensão sugerida. Instalaremos a extensão em um módulo posterior.

8. Observe a pasta src/components, que é onde todos os componentes serão armazenados.

Executar o servidor de desenvolvimento

Vamos iniciar o servidor de desenvolvimento e ver a página padrão.

1. Abra uma nova janela de terminal no Visual Studio Code selecionando Terminal>Novo Terminal.

2. No terminal integrado, execute o seguinte comando para iniciar o servidor de desenvolvimento:

   npm run serve
   

3. Abra o navegador e vá até http://localhost:8080.

   O aplicativo Vue padrão é exibido.

   

Parabéns! Você criou um aplicativo Vue usando a CLI do Vue.