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

Capacitor를 사용하여 Vue 웹 애플리케이션을 네이티브 모바일 앱으로 변환하는 방법에 대한 튜토리얼입니다. optionally, 모바일 UI를 향상시키기 위해 Konsta UI를 사용할 수도 있습니다.

Capacitor에 대해 알아보기

Capacitor은 웹 프로젝트에 쉽게 통합할 수 있는 게임 체이닝 도구입니다. 웹 애플리케이션을 네이티브 모바일 앱으로 변환하는 데 도움이 됩니다. Xcode와 Android Studio 프로젝트를 생성하고 네이티브 장치 기능에 대한 접근을 제공하는 자바 스크립트 브리지를 제공합니다.

Vue 앱 준비

첫 번째, 다음 명령어를 실행하여 새로운 Vue 앱을 생성하세요:

vue create my-app
cd my-app
npm install

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

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

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__를 개발 의존성으로 설치하고 프로젝트 내에서 설정하세요. 이름과 번들 ID에 대한 기본값을 수락하세요. build Preparing Your Vue App dist folder in your project’s root directory. This folder will be used by Capacitor later.

Adding Capacitor to Your Vue App

package.json

file to build and copy the Vue project: After running the command, you should see a new folder in your project’s root directory. This folder will be used by Capacitor later. Adding Capacitor to Your Vue App To convert your Vue web app into a native mobile container, follow these steps: Install the Capacitor CLI as a development dependency and set it up within your project. Accept the default values for name and bundle ID during the setup.
iOS 및 안드로이드 플랫폼에 관련된 패키지를 설치하고,
Capacitor은 각 플랫폼을 위한 폴더를 프로젝트의 루트에 생성합니다.

# 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

이제 Vue 프로젝트에서 iOS 와 android 폴더를 볼 수 있습니다.

__CAPGO_KEEP_0__.config.json capacitor.config.json webDir 를 빌드 명령어의 결과로 설정하세요: __CAPGO_KEEP_0__는 iOS 및 Android 플랫폼을 위한 폴더를 프로젝트의 루트에 생성합니다.

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

이제 Vue 프로젝트를 만들고 Capacitor:를 동기화할 수 있습니다.

npm run build
npx cap sync

원시 앱을 빌드하고 배포

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

Capacitor CLI를 사용하여 두 개의 원시 프로젝트를 모두 열 수 있습니다.

npx cap open ios
npx cap open android

연결된 장치에 앱을 배포하려면 Android Studio 또는 Xcode를 사용하세요.

Capacitor Live Reload

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

네트워크에서 자신의 로컬 IP 주소를 찾으십시오. 그리고 __CAPGO_KEEP_0__ 파일에 올바른 IP 주소와 포트를 업데이트 하십시오. capacitor.config.ts 이 변경 사항을 적용하려면 원시 프로젝트에 복사하여 붙여넣으십시오.

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__ 플러그인을 사용하여 __CAPGO_KEEP_2__를 사용합니다.

Using Capacitor Plugins

Capacitor 플러그인을 설치하고, 예를 들어 Share 플러그인을 설치한 후 Vue 앱에서 사용하세요.

npm i @capacitor/share

__CAPGO_KEEP_0__ 패키지를 임포트하고 앱에서 함수를 호출하세요. share() 새로운 플러그인을 설치한 후 __CAPGO_KEEP_0__ 명령어를 실행하고 앱을 다시 배포하세요.

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

Konsta UI 추가하기 sync Konsta UI를 Vue 앱에서 사용하려면 Tailwind가 이미 설치되어 있어야 하며 패키지를 설치하세요.

npx cap sync

Konsta UI를 Vue 앱에서 사용하려면 패키지를 설치하고 __CAPGO_KEEP_0__ 파일을 수정하세요.

__CAPGO_KEEP_0__ 컴포넌트로 앱을 감싸세요. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ tailwind.config.js __CAPGO_KEEP_0__

npm i konsta

__CAPGO_KEEP_0__ App __CAPGO_KEEP_0__ pages/_app.vue 파일을 열고 Konsta UI Vue 컴포넌트를 Vue 페이지에 사용하세요.

결론

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

Capgo이 앱을 더 빠르게 빌드하는 데 어떻게 도움이 될 수 있는지 알아보세요. 무료 계정으로 가입하세요. 오늘.

Building Mobile Apps with Vue and Capacitor에서 계속 진행하세요.

__CAPGO_KEEP_0__을 사용 중이라면 Building Mobile Apps with Vue and Capacitor 네이티브 미디어 및 인터페이스 동작을 계획하고 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities와 연결하세요. capgo/capacitor-live-activities를 사용하여 네이티브 기능을 사용하세요. capgo/capacitor-live-activities @capgo/capacitor-live-activities capgo/capacitor-live-활동의 구현 세부 사항에 대해 Using capgo/capacitor-video-player capgo/capacitor-video-player의 원시 기능에 대해 capgo/capacitor-video-player capgo/capacitor-video-player의 구현 세부 사항에 대해, 그리고 Using capgo/capacitor-native-navigation capgo/capacitor-native-navigation의 원시 기능에 대해.

Vue와 Capacitor를 사용하여 모바일 앱을 빌드하는 방법