Vue Native를 사용한 모바일 애플리케이션 구축

저자: Ejiro Asiuwhu✏️
Vue Native는 JavaScript를 통해 안드로이드와 iOS에서 실행할 수 있는 플랫폼 간 모바일 애플리케이션을 구축하기 위한 JavaScript 프레임워크입니다.React Native를 둘러싸면 개발자가 Vue Native를 사용하여 Vue를 사용하여 모바일 애플리케이션을 구축할 수 있습니다.js.
따라서 React-Native에서 수행할 수 있는 모든 작업을 Vue-Native에서 수행하고 코드를 React-Native로 컴파일할 수 있습니다.이렇게 하면 개발자는 Vue와 React 네이티브 생태계가 제공하는 기능에서 이득을 볼 수 있다.
이 문서에서는 Vue Native의 기능과 Vue Native를 사용하여 모바일 애플리케이션을 만드는 방법에 대해 설명합니다.

Vue Native 기능

Vue Native는 build a mobile application with Vue.js을 사용하기로 결정할 때 여러 가지 유용한 기능을 제공합니다.

성명식 표현

Vue Native는 선언 프로그래밍 패러다임을 사용합니다.이것은 우리가 원하는 결과를 얻기 위해 구성 요소와 상태를 어떻게 과장하기를 원하는지 설명하기만 하면 된다는 것을 의미한다.

양방향 제본

기본 Vue 애플리케이션에서는 구성 요소 클래스와 템플릿 간에 데이터를 공유할 수 있습니다.상태에서 데이터를 변경하면 UI에 자동으로 반영됩니다.
우리는 여전히 v-model을 방문하여 양방향 데이터 연결을 해야 한다.이것은 우리가 input을 사용하여 v-model 요소의 값을 구성 요소 데이터의 속성에 귀속시킬 수 있음을 의미한다.

Vue의 다양성.js 생태계

Vue 생태계는 자바스크립트 분야에서 가장 크고 가장 빠르게 성장하는 생태계 중 하나다.Vue Native를 사용하여 애플리케이션을 구축하면 더 큰 Vue 생태계의 이점을 얻을 수 있습니다.
이는 v-if 등의 기능을 사용하여 조건을 나타낼 수 있음을 의미한다. v-model은 양방향 데이터 귀속, v-for은 목록 표시, Vuex는 상태 관리에 사용된다.

컴파일하여 이 컴퓨터에 응답하다

Vue Native는 React Native에 의존하기 때문에 React Native 생태계를 잘 아는 개발자가 더 쉽게 이해할 수 있다.
또한 Vue Native에서 React 네이티브 구성 요소를 구현할 수 있으므로 통합 및 생산성 향상을 위해 한 줄의 추가 구성이 필요하지 않습니다.

발전 환경을 조성하다.

Vue Native를 사용하기 시작하는 가장 빠르고 간단한 방법은 Vue Native CLI을 사용하여 모바일 애플리케이션을 부팅하는 것입니다.이 CLI는 엔진 덮개 아래에 Expo CLI 또는 React Native CLI을 사용하여 간단한 단일 페이지 애플리케이션을 생성합니다.
즉, Vue 네이티브 CLI를 사용하려면 애플리케이션의 필요에 따라 CLI를 설치해야 합니다.
우선, 우리는 의존항을 설치해야 한다.먼저 다음 명령을 실행하여 Vue Native CLI를 전체적으로 설치합니다.

$ npm install --g vue-native-cli

React Native CLI와 호환되지만 Expo CLI를 전 세계에 설치합니다.

$  npm install --g expo-cli

Vue 기본 프로젝트 작성

Vue Native 및 Expo CLI가 전 세계에 설치되어 있는 이상 다음 명령을 사용하여 Vue Native 프로젝트를 만듭니다.

vue-native init <yourProjectName>

프로젝트의 루트 폴더를 탐색하고 다음 명령을 실행하여 개발 서버를 시작합니다.

 $ cd <yourProjectName>
 $ npm start

Metro Bundler는 React Native에서 JavaScript 코드를 컴파일하여 http://localhost:19002/에서 실행합니다.웹 브라우저에서 http://localhost:8080/에 액세스하면 다음 페이지가 표시됩니다.

물리적 디바이스에서 Vue 기본 응용 프로그램을 보려면 브라우저에서 QR코드를 검색하고 Expo Go for Android 또는 iOS에서 링크를 엽니다.
브라우저에 표시된 링크를 클릭하여 Android emulator나 iOS 에뮬레이터에서 응용 프로그램을 열 수도 있지만 Expo Go에서 사용할 수 있는 모든 API가 emulator나 에뮬레이터에서 사용 가능한 것은 아닙니다.
또는 Vue 기본 핵심 팀에서 마련한 Kitchen Sink demo app을 복제할 수 있습니다.

Vue 네이티브 UI 구성 요소

Vue Native 에는 애플리케이션 인터페이스를 구축하기 위한 기존 UI 구성 요소가 포함되어 있습니다.가장 중요한 것들을 살펴보자.

뷰 어셈블리

view 구성 요소의 작동 원리는 일반 HTML의 div 태그와 유사합니다.이 구성 요소는 React Native와 같이 Vue Native에서 사용자 인터페이스를 생성하는 기본 빌드 블록입니다.
다음 코드와 같이 view 구성 요소에 여러 개의 하위 구성 요소를 포함할 수 있습니다.

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

텍스트 구성 요소

모바일 애플리케이션에서 텍스트를 출력하려면 h1 또는 p과 같은 일반적인 HTML 태그를 사용할 수 없습니다.반대로 우리는 반드시 <text>…</text> 부품을 사용해야 한다.이 구성 요소를 사용하는 것은 매우 간단합니다.

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

이미지 구성 요소

image 구성 요소는 정적 이미지, 네트워크 이미지 및 사용자 장치의 이미지를 보여줍니다.
일반적인 img 표시에서 src 속성을 사용하는 것과 달리 source 구성 요소에서 image 속성을 연결하여 동적으로 이미지를 불러옵니다.이것은 웹 패키지가 구축 과정에서 우리의 이미지 자산을 묶을 수 있도록 합니다.
다음을 추가하여 Vue 기본 응용 프로그램에 이미지를 로드할 수 있습니다.

<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 구성 요소는 사용자 키보드를 통해 응용 프로그램에 텍스트를 입력합니다.우리는 v-model을 사용하여 우리가 있는 주의 데이터를 TextInput 구성 요소에 연결할 수 있다.이를 통해 TextInput의 값을 원활하게 가져오고 설정할 수 있습니다.

<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>

그런 다음 이러한 코드는 Vue 기본 응용 프로그램에서 다음 화면을 출력합니다.

NativeBase UI 구성 요소

프로덕션에 사용할 수 있는 모바일 애플리케이션을 구축하려면 내장된 Vue 네이티브 구성 요소만으로는 부족할 수 있습니다.다행히 뷰 네이티브는 리액트 네이티브와 뷰의 장점을 결합했다.js 생태계이기 때문에 NativeBase UI 구성 요소를 사용할 수 있습니다.
NativeBase는 GeekyAnts으로 만들어졌으며 Vue Native 팀과 같은 팀입니다.이 UI 구성 요소는 안드로이드와 iOS의 플랫폼 특정 디자인을 통해 모바일 애플리케이션에서 같은 자바스크립트 코드 라이브러리를 사용하여 진정한 기본 모양을 제공합니다.

양방향 데이터 바인딩

Vue 구성 요소 템플릿과 Vue Native의 Vue 상태 간에 데이터를 공유하는 것은 v-model이 필요합니다.다음과 같이 v-model 명령을 사용하여 양방향 데이터 바인딩을 탐색할 수 있습니다.

  <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>

데이터가 바인딩된 입력 필드를 상태에서 입력 필드와 텍스트 구성 요소로 출력하면 다음과 같은 내용을 볼 수 있습니다.

탐색 및 라우팅

Vue 기본 애플리케이션의 탐색 및 라우팅은 Vue Native Router 라이브러리에서 처리됩니다.엔진 덮개 아래에서 이 라이브러리는 유행하는 React Navigation 패키지를 사용한다.Vue Native Router와 React Navigation은 모두 비슷한 API를 가지고 있기 때문에 설치도 유사하다.
라이브러리가 사전 설치되어 있지 않으므로 응용 프로그램 탐색을 시작하려면 다음과 같은 항목을 설치해야 합니다.

npm i vue-native-router

Vue Native Router가 제대로 작동하려면 다음 패키지를 설치해야 합니다.

react-native-reanimated

react-native-gesture-handler

react-native-paper

project 디렉토리에서 다음 명령을 실행하여 패키지를 설치합니다.

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

Vue 네이티브 라우터는 StackNavigator 및 DrawerNavigator을 사용하여 탐색 화면을 등록할 수 있습니다.

<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>

화면 사이를 내비게이션하려면 navigate 대상에서 navigation 방법을 사용하십시오. 이 대상은 도구로 전달됩니다. 아래와 같습니다.

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

국가 관리

Vue 기본 애플리케이션의 중앙 집중식 상태 관리 모드에서는 Vue의 공식 상태 관리 라이브러리 Vuex을 사용할 수 있습니다.
통합형 Vuex는 간단합니다.먼저 다음 명령 중 하나를 사용하여 Vuex를 설치합니다.

npm i vuex
//or
yarn add vuex

중앙 스토리지 파일을 생성하고 애플리케이션에 따라 state, getters, mutations 또는 actions을 추가합니다.간단함을 유지하려면 state 객체를 사용하십시오.

// 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;

우리 상점의 데이터와 방법을 사용하는 것은 전통적인 Vue 응용 프로그램과 다르다.다음은 우리 상점의 데이터를 가져오고 사용하는 방법입니다.

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

일반적으로 Vue 및 Vuex 애플리케이션 설정에서 this.$store을 사용하는 것은 아닙니다.

장치 API 액세스

React native의 풍부한 생태계 때문에, 우리 Vue native 프로그램에서 본 기기의 장치 API에 접근할 수 있습니다.예를 들어, 사용자의 장치 지리적 위치 지정 API에 액세스하려면 다음과 같이 expo-location을 사용할 수 있습니다.

<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>

Expo 패키지를 사용하면 별도의 구성이나 설정이 필요하지 않으므로 Vue Native를 사용하여 모바일 애플리케이션을 쉽게 구축할 수 있습니다.

결론

Vue Native를 사용하여 모바일 애플리케이션을 구축하면 JavaScript를 사용하여 플랫폼 간 모바일 애플리케이션을 구축할 수 있습니다.
Vue와 React 네이티브 생태계의 풍부성과 장점을 빌려 개발자는 .vue 구성 요소를 작성하고 Expo와 React 네이티브 패키지를 응용 프로그램에 통합할 수 있어 추가 설정이 거의 필요 없다.
이 강좌에서 사용한 전체 코드는 GitHub에서 얻을 수 있다.이 글에 대한 당신의 견해를 내가 알 수 있도록 수시로 평론을 발표해 주십시오.너도 GitHub에서 나를 찾을 수 있다.읽어주셔서 감사합니다!

사용자와 동일한 방식으로 Vue 애플리케이션을 경험할 수 있습니다.

Vue를 디버깅합니다.js 응용 프로그램은 매우 어려울 수 있습니다. 특히 사용자 세션에서 몇 십 개 (몇 백 개가 아니라면) 돌연변이가 있을 수 있습니다.프로덕션의 모든 사용자를 모니터링하고 추적하는 Vue 돌연변이에 관심이 있다면 LogRocket을 시도해 보십시오.

LogRocket은 웹 응용 프로그램에 사용되는 DVR과 같이 Vue 응용 프로그램에서 발생하는 모든 것을 기록한다. 이는 네트워크 요청, 자바스크립트 오류, 성능 문제 등을 포함한다.문제가 발생한 원인을 추측할 필요가 없습니다. 문제가 발생했을 때의 응용 프로그램의 상태를 종합하고 보고할 수 있습니다.
LogRocket Vuex 플러그인은 Vuex 돌연변이를 LogRocket 콘솔에 기록하여 오류를 초래하는 상하문과 문제가 발생했을 때 프로그램의 상태를 제공합니다.
Vue 애플리케이션을 디버깅하는 방식을 현대화 - Start monitoring for free