Criando uma aplicação com NativeScript e Vue — Parte 1 (Criando o projeto inicial)


Para seguir este tutorial, você precisará ter instalado em sua máquina:

  • Node.js
  • NativeScript CLI (execute o comando npm install -g nativescript)
  • JDK 8
  • Android SDK
  • Vue CLI (execute o comando npm install -g @vue/cli)

Para criar o projeto notas, em um terminal digite:

vue init nativescript-vue/vue-cli-template notas

O assistente de criação de projeto irá fazer o download do template e solicitar algumas informações básicas sobre a aplicação. Após o projeto ser criado, entre na pasta do projeto usando o comando

cd notas

e instale as dependências necessárias com o comando

npm install

Quando o npm terminar de instalar todas as dependências, a aplicação poderá ser executada no emulador do Android.

Antes de executá-lo, no entanto, abra o projeto em uma IDE para poder editar os arquivos. Se estiver usando o VS Code, basta utilizar o comando abaixo:

code .

Quando o VS Code estiver iniciado e com o projeto carregado, volte no terminal e execute o comando abaixo para executar a aplicação:

tns run android --bundle

O tns irá construir o projeto, compilando e instalando a aplicação no emulador e, após isso, iniciando a aplicação automaticamente. O tns fica então executando no terminal, observando qualquer alteração nos arquivos do projeto. A primeira vez que o tns for executado, o processo de inicialização irá demorar um pouco, mas a partir da segunda vez o processo será mais rápido. Sempre que qualquer arquivo do projeto for alterado, por exemplo, na IDE, o tns automaticamente recompila, re-instala e reinicia a aplicação no emulador.

Antes de concluir esta primeira parte, altere o título da tela inicial para Login. Para isso, abra na IDE o arquivo App.vue que está na pasta app/components do projeto e altere o atributo title da tag <ActionBar> conforme mostrado abaixo.

<ActionBar title="Login" />

Note que, ao salvar o arquivo App.vue, o tns, que está rodando no terminal, reinicia a aplicação no emulador e o título da tela inicial é alterado para refletir a edição realizada no arquivo.


E assim, concluímos esta primeira parte. Na Parte 2, você irá alterar a tela inicial padrão, App.vue, para que ela seja a tela de login da aplicação.