New choice for app development: building mobile applications using Vue native

Vue Native It's a JavaScript frame , Designed to use JavaScript Build can be in Android and iOS Cross platform mobile applications running on . Through encapsulation React Native, Developers can use Vue Native Use Vue.js Building mobile applications .

Because of that , All can be found in React Native Everything can be done in Vue Native Finish in , And the code is compiled as React Native. In this way , Developers can learn from Vue and React Native Benefit from the content provided by the ecosystem .

In this article , We will discuss Vue Native Features and how to use Vue Native Create a mobile app .

Vue Native Characteristics of

In the decision to use Vue.js When building mobile applications ,Vue Native There are many useful features to consider .

Declarative rendering

Vue Native Use the declarative programming paradigm . This means that we just need to declare how we want our components and states to render to get the results we want .

Two way binding

In our Vue Native Application , We can share data between our component classes and their templates . If we change the data in the State , It will be automatically reflected in the user interface .

We still have to visit v-model Two way data binding . This means that we can use v-model Will a input The value of the element is bound to the data attributes of our component .

Vue.js The richness of ecosystems

Vue The ecosystem is JavaScript Largest field 、 One of the fastest growing ecosystems . Use Vue Native Building applications provides greater Vue The benefits of ecosystems .

This means that we can use things like v-if For conditional rendering ,v-model For bidirectional data binding ,v-for For list rendering , as well as Vuex Used for state management and other functions .

Compiled into React Native

because Vue Native Depend on React Native, So I'm familiar with React Native Ecosystem developers are easier to get started .

We can still do that Vue Native Medium rendering React Native Components , Without writing an additional line of configuration , To easily integrate and improve productivity .

Set up the development environment

Start using Vue Native The quickest and easiest way to use Vue Native CLI^[1] Boot mobile applications . this CLI Use Expo CLI^[2] or React Native CLI^[3] Generate a simple single page application .

This means that we must install either CLI, According to the needs of our application , To use Vue Native CLI.

To start , We have to install some dependencies . First , Run the following command to globally install Vue Native CLI.

$ npm install --g vue-native-cli

Next , Global installation Expo CLI, Although this can be related to React Native CLI swap ：

$ npm install --g expo-cli

Create a Vue Native project

Now? Vue Native and Expo CLI Are installed globally , Let's use the following command to create a Vue Native project ：

vue-native init <yourProjectName>

By navigating to the root of the project and running this command , Start a development server ：

$ cd <yourProjectName>
$ npm start

Metro Bundler stay React Native Chinese compiler JavaScript Code , from http://localhost:19002/ function . By means of Web Browser access http://localhost:8080/, The following page will appear ：

To view on a physical device Vue Native application , Please scan the QR code in the browser , And in Android or iOS Of Expo Go Open link in .

We can also click the link displayed in the browser , In Android emulator or iOS Open the application on the simulator , But not all are Expo Go Available in API Can be used on the simulator .

As an option , We can clone Vue Native Prepared by the core team Kitchen Sink Demo application .

Vue Native UI Components

Vue Native Some out of the box UI Component to build the application interface , Let's look at some of the most important components .

View component

view Components are like our ordinary HTML Medium div Work like a label . This component is in Vue Native Basic building blocks for creating user interfaces in , As in the React Native In the same .

We can do it in one view There are multiple subcomponents in the component , Consider the following code .

<template>
  <view class="container">
    <text>My Awesome Vue Native App</text>
  </view>
</template>

Text Components

To output text in our mobile application , We can't use the regular HTML label , Such as h1 or p. contrary , We have to use <text>...<text> Components . Using this component is very direct .

<template>
  <text>Hello World</text>
</template>

Image Components

Image Component renders still images 、 Network images and images from user devices .

With the ordinary img Use in Tags src Different properties , Here we are image The component is bound with source Property to dynamically load our images . This makes webpack During the construction process, we can bundle our image assets .

By adding the following , We can load images into Vue Native Application ：

<template>
    <!-- Network image -->
  <image
 :style="{ width: 300, height: 150 }"
 :source="{
 uri:'https://images.unsplash.com/photo-1621570074981-ee6a0145c8b5?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
 }"
 />

  <!-- Static image -->
  <image
 :style="{ width: 300, height: 150 }"
 :source="require('./assets/photo.jpg')"
 />

  <!-- Local disk image --> 
  <image
 :style="{width: 66, height: 58}"
 :source="{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}"
 />
</template>

TextInput Components

TextInput Component enters text into the application through the user's keyboard . We can use v-model Bind the data in our state to TextInput Components . This allows us to seamlessly get and set TextInput Value ：

<template>
  <view class="container"> 
    <text-input
 :style="{
 height: 30,
 width: 250,
 borderColor: '#511281',
 borderWidth: 1,
 }"
 v-model="text"
 />
  </view>
</template>

<script>
export default {
 data() {
 return {
 text: "",
 };
 },
};
</script>

then , The above code is in Vue Native The following screen is output in the application ：

NativeBase UI Components

To build a mobile application that can be put into production , Just use the built-in Vue Native Components may not be enough . Fortunately, ,Vue Native brought React Native and Vue.js The advantages of two ecosystems , So we can use it NativeBase UI Components .

NativeBase By GeekyAnts Created , They are Vue Native The same team behind . This UI Components give us a truly native look and feel , In our mobile applications , By the same JavaScript The code base , by Android and iOS Provides platform specific design .

Two way data binding

Use v-model In our Vue Component templates and Vue Native Medium Vue Sharing data between States is easy . We can use v-model Instructions explore two-way data binding , As shown below ：

<template>
  <view class="container"> 
    <text-input
 :style="{
 height: 30,
 width: 250,
 borderColor: '#511281',
 borderWidth: 1,
 }"
 v-model="text"
 />
  </view>
</template>

<script>
export default {
 data() {
 return {
 text: "",
 };
 },
};
</script>

By outputting an input field with data binding from our state to the input field and a text component , We can see the following ：

Navigation and routing

Vue Native Navigation and routing in applications are through Vue Native Router^[4] Library to handle . In the underlying , This library uses the popular React Navigation^[5] package .Vue Native Router and React Navigation There are similar api, Therefore, the installation is similar .

The library is not pre installed , So in order to start using navigation in our application , We must install it in the following way .

npm i vue-native-router

Please note that , We need to install the following packages to make Vue Native Router Normal work ：

• react-native-reanimated ^[6]
• react-native-gesture-handler ^[7]
• react-native-paper ^[8]

Run the following command at the root of the project to install these packages ：

npm i react-native-reanimated react-native-gesture-handler react-native-paper

Vue Native Router Provides StackNavigator and DrawerNavigator To register the screen for navigation ：

<script>
import {
 createAppContainer,
 createStackNavigator,
} from "vue-native-router";

import SettingsScreen from "./screens/SettingsScreen.vue";
import HomeScreen from "./screens/HomeScreen.vue";

const StackNavigator = createStackNavigator(
 {
 Settings: SettingsScreen,
 Home: HomeScreen,
 },
 {
 initialRouteName: 'Home',
 }
);

const AppNavigator = createAppContainer(StackNavigator);

export default {
 components: { AppNavigator },
}
</script>

To navigate between screens , Please call navigation On the object navigate Method , This method is used as props Pass it on as follows ：

<script>
export default {
 // navigation is declared as a prop
 props: {
 navigation: {
 type: Object
 }
 },
 methods: {
 navigateToScreen() {
 this.navigation.navigate("Profile");
 }
 }
}
</script>

State management

about Vue Native Centralized state management mode in applications , We can use Vue Official status management library Vuex.

Integrate Vuex It's simple . First , Use one of the following commands to install Vuex：

npm i vuex
//or
yarn add vuex

Create a central storage file , And add... According to the needs of the application state、getter、mutations or actions. For the sake of simplicity , Use it here state object :

// store/index.js

import Vue from 'vue-native-core';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    name: 'Ejiro Asiuwhu',
  },
});
export default store;

In our store The data and methods used in this paper are different from the traditional Vue Applications are very different , Here is how to import and use our store Data in ：

<script>
import store from "./store";
export default {
 computed: {
 name() {
 return store.state.name;
 },
 },
};
</script>

Please note that , We don't have the usual Vue and Vuex Use... As in application settings this.$store.

Access devices API

because React Native Rich ecosystems , In our Vue Native Access to local devices in the application API it is possible that . for example , To access the user's device geolocation in our application API, We can use it like this expo-location^[9].

<template>
  <view class="container">
 <button
 :on-press="getLocation"
 title="Get Location"
 color="#184d47"
 accessibility-label="Get access to users' location"
 >
    <text>Location Details:</text>
    <text>{{ location }}</text>
    <text>Latitude: {{ latitude }}</text>
    <text>Longitude: {{ longitude }}</text>
    <text class="text-error">{{ errorMessage }}</text>
  </view>
</template>

<script>
import * as Location from "expo-location";

export default {
 data() {
 return {
 location: "",
 latitude: "",
 longitude: "",
 errorMessage: "",
 text: "",
 user: {
 country: "",
 },
 };
 },
 methods: {
 async getLocation() {
 try {
 let { status } = await Location.requestForegroundPermissionsAsync();
 if (status !== "granted") {
 this.errorMessage = "Permission to access location was denied";
 return;
 }
 let location = await Location.getCurrentPositionAsync({});
 this.location = location;
 this.latitude = location.coords.latitude;
 this.longitude = location.coords.longitude;
 this.errorMessage = "";
 } catch (error) {
 this.errorMessage = error;
 }
 },
 },
}
</script>

By using Expo package , No additional configuration or setup is required , This enables the use of Vue Native Building mobile applications becomes easy .

summary

Use Vue Native Build mobile applications to use JavaScript Building cross platform mobile applications opens up many possibilities .

By visiting Vue and React Native Richness and advantages of ecosystem , Developers can write .vue Component and will Expo and React Native Package integration into the application , Almost no additional configuration is required .

The complete code used in this tutorial can be found in GitHub Found on the .

The source code of this tutorial ：https://github.com/ejirocodes/Vue-Native-Demo

original text ：https://blog.logrocket.com/building-mobile-apps-with-vue-native/
author ：Ejiro Asiuwhu

Recent articles

• 5 One that can accelerate development VueUse Library function
• Big factory 2 individual Vue practice , Efficiency improvement 80%！
  
• Vue Use in defineAsyncComponent Delay loading components
  
• Use React Native You can develop Window Desktop app ！
• The hacker said ： How to do 4 Sky line is a small program ？
• Pinia And Vuex Comparison of ：Pinia yes Vuex A good substitute for ？
  
• You may not know the power HTML attribute
  
• 2021 Annual acceleration App Developed 8 Best cross platform framework

Reference material