Vue Native é uma estrutura JavaScript projetada para construir aplicativos móveis de plataforma cruzada que podem ser executados em Android e iOS com JavaScript. Ao envolver o React Native, os desenvolvedores podem usar o Vue Native para construir aplicativos móveis usando o Vue.js.
Por causa disso, tudo o que pode ser feito no React Native pode ser feito no Vue Native, e o código é compilado no React Native. Dessa forma, os desenvolvedores se beneficiam do que os ecossistemas Vue e React Native oferecem.
Nesta postagem, discutiremos os recursos do Vue Native e como criar um aplicativo móvel usando o Vue Native.
Recursos do Vue Native
Vue Native tem muitos recursos úteis a serem considerados ao decidir construir um aplicativo móvel com Vue.js .
Renderização declarativa
Vue Native usa o paradigma de programação declarativa. Isso significa que simplesmente declaramos como queremos que nossos componentes e estado sejam renderizados para obter os resultados desejados.
Ligação bidirecional
Em nosso aplicativo Vue Native, podemos compartilhar dados entre nossa classe de componente e seu modelo. Se alterarmos os dados em nosso estado, eles refletirão automaticamente na IU.
Ainda devemos acessar o v-model para vinculação de dados bidirecional. Isso significa que podemos vincular o valor de um elemento input a uma propriedade dos dados de nosso componente usando o v-model .
A riqueza do ecossistema Vue.js
O ecossistema Vue é um dos maiores e de crescimento mais rápido no espaço JavaScript. Construir um aplicativo com o Vue Native oferece os benefícios do ecossistema Vue maior.
Isso significa que podemos usar recursos como v-if para renderização condicional, v-model para vinculação de dados bidirecional, v-for para renderização de lista e Vuex para gerenciamento de estado.
Compilando para reagir nativo
Como o Vue Native depende do React Native, é mais fácil para desenvolvedores familiarizados com o ecossistema React Native aprender.
Também podemos renderizar componentes do React Native no Vue Native sem escrever uma única linha de configuração extra para facilitar a integração e aumentar a produtividade.
Configurando o ambiente de desenvolvimento
A maneira mais rápida e fácil de começar a usar o Vue Native é inicializar um aplicativo móvel com a Vue Native CLI . Esta CLI gera um aplicativo simples de uma página usando Expo CLI ou Reat Native CLI nos bastidores.
Isso significa que devemos instalar qualquer CLI, dependendo da necessidade de nosso aplicativo, para usar a CLI Vue Native.
Para começar, devemos instalar algumas dependências. Primeiro, execute o seguinte comando abaixo para instalar o Vue Native CLI globalmente:
$ npm install--g vue-native-cli
Em seguida, instale o Expo CLI globalmente, embora possa ser trocado pelo React Native CLI:
$ npm install--g expo-cli
Criação de um projeto Vue Native
Agora que o Vue Native e o Expo CLI estão instalados globalmente, vamos criar um projeto do Vue Native com o seguinte comando:
init nativa do vue
Inicie um servidor de desenvolvimento navegando na pasta raiz do projeto e executando este comando:
$ cd$ npm início
Metro Bundler, que compila o código JavaScript no React Native, é executado em http://localhost: 19002/ . Ao visitar http://localhost: 8080/ em um navegador da web, a seguinte página aparece:
Para visualizar o aplicativo Vue Native em um dispositivo físico, escaneie o código QR no navegador e abra o link no Expo Go para Android ou iOS .
Também podemos abrir o aplicativo no emulador Android ou simulador iOS clicando nos links mostrados no navegador, mas nem todas as APIs que estão disponíveis no Expo Go estão disponíveis no emulador ou simulador.
Opcionalmente, podemos clonar o aplicativo de demonstração Kitchen Sink preparado pela equipe principal do Vue Native.
Componentes de IU nativos do Vue
O Vue Native vem com um punhado de componentes de IU prontos para uso para construir interfaces de aplicativos. Vamos dar uma olhada em alguns dos mais importantes.
Visualizar componente
O componente view funciona como a tag div em nosso HTML normal. Este componente é o bloco de construção fundamental para a criação de interfaces de usuário no Vue Native, assim como no React Native.
Podemos ter vários componentes filhos em um componente view , como no seguinte código:
Aplicativo nativo My Awesome Vue
Componente Texto
Para gerar texto em nosso aplicativo móvel, não podemos usar as tags HTML regulares como h1 ou p . Em vez disso, devemos usar o componente
Hello World
Imagem componente
O componente image renderiza imagens estáticas, imagens de rede e imagens do dispositivo de um usuário.
Ao contrário de uma tag img normal, onde usamos o atributo src , aqui vinculamos o atributo source em nossa imagem componente para carregar nossas imagens dinamicamente. Isso permite que o webpack agrupe nossos ativos de imagem durante o processo de construção.
Ao adicionar o seguinte, podemos carregar imagens em nosso aplicativo Vue Native:
componente TextInput
O componente TextInput insere texto no aplicativo por meio do teclado do usuário. Podemos usar v-model para vincular dados em nosso estado ao componente TextInput . Isso nos permite obter e definir perfeitamente o valor de TextInput :
O código acima gera a seguinte tela no aplicativo Vue Native:
Componente de IU NativeBase
Para construir um aplicativo móvel pronto para produção, usar apenas os componentes integrados do Vue Native provavelmente não será suficiente. Felizmente para nós, Vue Native traz o melhor dos ecossistemas React Native e Vue.js, então podemos usar um Componente de IU NativeBase .
NativeBase foi criado por GeekyAnts , a mesma equipe por trás do Vue Native. Este componente de IU nos dá uma aparência verdadeiramente nativa com um design específico de plataforma para Android e iOS sobre a mesma base de código JavaScript em nosso aplicativo móvel.
Ligação de dados bidirecional
Compartilhar dados entre nosso modelo de componente Vue e nosso estado Vue no Vue Native é muito fácil com o v-model . Podemos explorar a vinculação de dados bidirecional com a diretiva v-model , como abaixo:
Ao gerar um campo de entrada com vinculação de dados de nosso estado para o campo de entrada e um componente de texto, vemos o seguinte:
Navegação e roteamento
A navegação e o roteamento em nosso aplicativo Vue Native são tratados com a biblioteca Vue Native Router . Nos bastidores, esta biblioteca usa o popular pacote React Navigation . Tanto o Vue Native Router quanto o React Navigation têm APIs semelhantes, portanto, instalações semelhantes.
A biblioteca não vem pré-instalada, então, para começar a navegar em nosso aplicativo, devemos instalá-la com o seguinte:
npm i vue-native-router
Observe que precisamos instalar os seguintes pacotes para que o Vue Native Router funcione corretamente:
Execute o seguinte comando na raiz do diretório projeto para instalar esses pacotes:
npm i react-native-reanimated react-native-gesto-handler react-native-paper
O Vue Native Router fornece StackNavigator e DrawerNavigator para registrar telas para navegação:
Para navegar entre as telas, chame o método navigate no objeto navigation , que é passado como um suporte como este:
Gestão estadual
Para um padrão de gerenciamento de estado centralizado em um aplicativo Vue Native, podemos usar Vuex , a biblioteca oficial de gerenciamento de estado do Vue.
Integrar a Vuex é simples. Primeiro, instale o Vuex com um dos seguintes comandos:
npm i vuex //ou fio adicionar vuex
Crie um arquivo de armazenamento central e adicione o estado , getters , mutações ou ações dependendo do necessidades do aplicativo. Para manter as coisas simples, use o objeto state aqui:
//store/index.js importar Vue de'vue-native-core';
importar Vuex de'vuex';
Vue.use (Vuex);
const store=new Vuex.Store ({ Estado: { nome:'Ejiro Asiuwhu', },
});
exportar armazenamento padrão;
Usar os dados e métodos em nossa loja é bem diferente de um aplicativo Vue convencional; aqui está como importar e usar os dados em nossa loja:
Observe que não estamos usando this. $ store como normalmente faríamos em uma configuração de aplicativo Vue e Vuex.
Acessando APIs de dispositivos
Obter acesso a APIs de dispositivos nativos em nosso aplicativo Vue Native é possível devido ao rico ecossistema do React Native. Para acessar a API de geolocalização do dispositivo de um usuário em nosso aplicativo, por exemplo, podemos usar expo-location assim:
Detalhes do local: {{location}} Latitude: {{latitude}} Longitude: {{longitude}} {{errorMessage}}
Ao usar o pacote Expo, não há configurações ou configurações extras necessárias, o que torna a criação de um aplicativo móvel com Vue Native uma brisa.
Conclusão
Construir um aplicativo móvel com Vue Native abre muitas possibilidades na construção de aplicativos móveis multiplataforma com JavaScript.
Com acesso à riqueza e aos benefícios dos ecossistemas Vue e React Native, os desenvolvedores podem escrever componentes .vue e integrar os pacotes Expo e React Native em aplicativos com pouca ou nenhuma configuração extra.
O código completo usado neste tutorial está disponível em GitHub . Sinta-se à vontade para deixar um comentário para me dizer o que você achou deste artigo. Você também pode me encontrar no Twitter e no GitHub . Obrigado por ler!
A postagem Criação de aplicativos móveis com Vue Native apareceu primeiro no LogRocket Blog .
