Vue와 Capacitor을 사용한 모바일 앱 개발

Capacitor를 사용하여 Vue 웹 애플리케이션을 모바일 앱으로 변환하는 과정을 안내해 드리겠습니다. optionally, Konsta UI를 사용하여 모바일 UI를 개선할 수도 있습니다.

Capacitor에 대해

Capacitor는 웹 프로젝트에 쉽게 통합할 수 있는 게임 체이닝 도구입니다. 웹 애플리케이션을 모바일 앱으로 변환하고 native Xcode 및 Android Studio 프로젝트를 생성하며 native 장치 기능에 대한 접근을 제공합니다.

Vue 앱 준비

처음에, Vue 앱을 생성하기 위해 다음 명령어를 실행하세요:

vue create my-app
cd my-app
npm install

자연스러운 모바일 배포를 위해 Vue 앱을 준비하려면 프로젝트를 내보내야 합니다. package.json 파일에 스크립트를 추가하여 Vue 프로젝트를 빌드하고 복사하세요: 명령어를 실행한 후, 프로젝트의 루트 디렉토리에 새로운 폴더가 생성되어야 합니다. 이 폴더는 __CAPGO_KEEP_0__에 의해 나중에 사용됩니다. __CAPGO_KEEP_0__를 Vue 앱에 추가하는 방법

{
  "scripts": {
    // ...
    "build": "vue-cli-service build"
  }
}

Vue 웹 앱을 네이티브 모바일 컨테이너로 변환하려면 다음 단계를 따르세요: build __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정하세요. 이름과 번들 ID에 대한 기본값을 수락하세요. dist folder in your project’s root directory. This folder will be used by Capacitor later.

플랫폼을 추가하고, Capacitor는 프로젝트의 루트 디렉토리에 각 플랫폼에 대한 폴더를 생성합니다:

__CAPGO_KEEP_0__는 __CAPGO_KEEP_1__을 사용하여 플랫폼을 추가합니다.

Capacitor는 CLI을 사용하여 플랫폼을 추가합니다.
__CAPGO_KEEP_0__는 __CAPGO_KEEP_1__을 사용하여 플랫폼을 추가합니다.
Capacitor는 __CAPGO_KEEP_1__을 사용하여 플랫폼을 추가합니다.

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Vue project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

__CAPGO_KEEP_0__의 새로운 폴더를 이제 보실 수 있습니다. iOS 및 android Vue 프로젝트의 폴더입니다.

__CAPGO_KEEP_0__.config.json 파일을 업데이트하여 capacitor.config.json 을 빌드 명령어의 결과로 설정하세요. __CAPGO_KEEP_0__와 동기화할 수 있는 Vue 프로젝트를 빌드할 수 있습니다. __CAPGO_KEEP_0__:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

Now, you can build your Vue project and sync it with Capacitor:

npm run build
npx cap sync

Native 앱을 빌드하고 배포할 수 있습니다.

iOS 앱을 개발하려면 Xcode가 설치되어 있어야 하며, Android 앱을 개발하려면 Android Studio가 설치되어 있어야 합니다. 또한 iOS는 Apple Developer Program에, Android는 Google Play Console에 가입하여 앱을 앱 스토어에 배포해야 합니다.

Capacitor CLI을 사용하여 iOS와 Android의 네이티브 프로젝트를 모두 열 수 있습니다.

npx cap open ios
npx cap open android

Android Studio 또는 Xcode를 사용하여 연결된 장치에 앱을 배포합니다.

Capacitor Live Reload

Capacitor 앱이 네트워크 내 특정 URL에서 콘텐츠를 로드하여 모바일 장치에서 라이브 리로드를 활성화합니다.

네트워크 내의 로컬 IP 주소를 찾고 __CAPGO_KEEP_0__ 파일에 올바른 IP 주소와 포트를 업데이트하십시오. capacitor.config.ts __CAPGO_KEEP_0__에 이러한 변경 사항을 복사하여 네이티브 프로젝트에 적용하십시오.

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:8080',
    cleartext: true
  }
};

export default config;

Vue 앱을 업데이트하면 자동으로 앱이 다시 로드되고 변경 사항을 표시합니다.

npx cap copy

__CAPGO_KEEP_0__ 플러그인을 설치하여, 예를 들어 공유 플러그인을 설치하고 Vue 앱에서 사용하십시오.

Capacitor 패키지를 임포트하고 함수를 호출하십시오.

Install a Capacitor plugin, such as the Share plugin, and use it in your Vue app:

npm i @capacitor/share

__CAPGO_KEEP_0__ Live Reload share() 애플리케이션 내에서 함수:

<template>
  <div>
    <h1>Welcome to Vue and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

새로운 플러그인을 설치한 후에 다음 명령어를 실행하고 애플리케이션을 다시 장치에 배포하세요: sync 명령어를 실행하고 애플리케이션을 다시 장치에 배포하세요:

npx cap sync

Konsta UI 추가

Vue 앱에서 Konsta UI를 사용하려면 먼저 Tailwind가 이미 설치되어 있어야 합니다. 그리고 다음 패키지를 설치하세요: Vue 앱에서 Konsta UI를 사용하려면 패키지를 설치하고 다음 파일을 수정하세요: Konsta UI Vue 컴포넌트를 사용하기 위해 애플리케이션을 다음 파일에 포함하세요: tailwind.config.js Konsta UI Vue 컴포넌트를 사용하기 위해 애플리케이션을 포함하세요:

npm i konsta

Konsta UI Vue 컴포넌트를 사용하기 위해 애플리케이션을 포함하세요: App Konsta UI Vue 컴포넌트를 사용하기 위해 애플리케이션을 포함하세요: pages/_app.vue Konsta UI Vue 컴포넌트를 사용하기 위해 애플리케이션을 포함하세요:

Konsta UI Vue 컴포넌트를 사용하기 위해 애플리케이션을 포함하세요:

Capacitor은 기존 웹 프로젝트를 기반으로 네이티브 애플리케이션을 빌드하는 훌륭한 옵션입니다. Capgo을 추가함으로써, 앱에 실시간 업데이트를 추가하는 것이 훨씬 쉬워졌으며, 사용자들은 항상 최신 기능과 버그 수정에 접근할 수 있습니다.

Capgo을 사용하여 더 빠르게 더 나은 앱을 빌드하는 방법을 알아보세요. 무료 계정으로 가입하세요. 오늘.

Capacitor와 함께 모바일 앱을 만들기