current position:Home>New choice for app development: building mobile applications using Vue native
New choice for app development: building mobile applications using Vue native
2021-08-27 16:50:47 【Front end full stack developer】
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
Vue Native CLI: https://github.com/GeekyAnts/vue-native-cli
[2]Expo CLI: https://docs.expo.io/workflow/expo-cli/
[3]React Native CLI: https://github.com/react-native-community/cli
[4]Vue Native Router: https://github.com/GeekyAnts/vue-native-router
[5]React Navigation: https://reactnavigation.org/
[6]react-native-reanimated: https://github.com/kmagiera/react-native-reanimated
[7]react-native-gesture-handler: https://github.com/kmagiera/react-native-gesture-handler
[8]react-native-paper: https://github.com/callstack/react-native-paper
[9]expo-location: https://docs.expo.io/versions/latest/sdk/location/
copyright notice
author[Front end full stack developer],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827165045104y.html