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

이 튜토리얼에서, 우리는 Vue 웹 애플리케이션을 Capacitor를 사용하여 네이티브 모바일 앱으로 변환하는 과정을 안내해 드리겠습니다. Capgo 네이티브 네비게이션 및 전환을 추가하여 네이티브 모바일 느낌을 더할 수 있고, tailwind-capacitor를 사용하여 안전한 영역을 설정할 수 있습니다.

Capacitor에 대해 알아보세요

Capacitor는 웹 프로젝트에 쉽게 통합할 수 있는 게임 체이닝 도구입니다. Capacitor를 사용하여 애플리케이션을 네이티브 모바일 앱으로 변환할 수 있으며, 네이티브 장치 기능을 사용할 수 있습니다. 예를 들어, 카메라를 사용할 수 있습니다.

Vue 앱을 준비하세요

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

vue create my-app
cd my-app
npm install

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

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

__CAPGO_KEEP_0__를 추가하여 네이티브 모바일 앱을 빌드하세요 build __CAPGO_KEEP_0__를 사용하여 네이티브 모바일 앱을 빌드하세요 dist Capacitor를 사용하여 네이티브 모바일 앱을 빌드하세요

Capacitor를 사용하여 네이티브 모바일 앱을 빌드하세요

To your Vue web app을 모바일 앱으로 변환하려면 다음 단계를 따르세요:

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 및 Android 플랫폼에 대한 핵심 패키지 및 관련 패키지를 설치하세요.
Add the platforms, and Capacitor will create folders for each platform at the root of your project:

# 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 그리고 context Page/area: Capgo marketing website. Role: Short UI label or navigation item. Seen in: page trust.astro. Message key `and` (And).

android capacitor.config.json __CAPGO_KEEP_0__.config.json파일을 업데이트하여 웹 디렉토리 빌드 명령어의 결과로:

{
  "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 주소를 찾고 파일에 올바른 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;

__CAPGO_KEEP_0__ Live Reload

npx cap copy

이제 앱이 자동으로 다시 로드되고 변경 사항을 표시할 것입니다. Vue 앱을 업데이트할 때.

Capacitor 플러그인 사용

Capacitor 플러그인을 설치하고 Vue 앱에서 사용하세요: Capacitor

npm i @capacitor/share

__CAPGO_KEEP_0__ 패키지를 임포트하고 앱에서 __CAPGO_KEEP_0__ 함수를 호출하세요: share() __CAPGO_KEEP_0__ 플러그인을 설치한 후에 __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>

다음으로, iOS 및 Android에서 앱이 더 원생스러운 느낌을 줄 수 있도록 __CAPGO_KEEP_0__ 네비게이션과 전환을 사용하고, 수평 스크롤이나 안전 영역이 잘려나가는 문제를 해결하세요. sync 원생스러운 UI를 위해 __CAPGO_KEEP_0__ 네이티브 네비게이션과 전환을 사용하세요

npx cap sync

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Ionic과 함께 10년 이상의 경력을 쌓았습니다. Ionic과 함께 10년 이상의 경력을 쌓았습니다. Ionic과 함께 10년 이상의 경력을 쌓았습니다. Tailwind CSS.

For a native mobile feel in a Vue + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

@capgo/capacitor-native-navigation 네이티브 네비게이션 바, iOS에서 Liquid Glass 탭 바, Android에서 흐린 탭 바 스타일이 있습니다. Vue 라우터는 경로 상태를 유지하고 플러그인은 네이티브 창을 관리합니다.
@capgo/capacitor-transitions Ionic-style 페이지 전환과 iOS 에지 스와이프-백이 WebView layer에서 작동합니다. Ionic UI를 채택하지 않습니다.

두 개 모두 설치하세요.

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

네이티브 네비게이션을 CSS inset 모드와 함께 구성하여 웹 콘텐츠가 네이티브 바를 존중하세요.

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Liquid Glass 탭 바를 렌더링하세요 (iOS는 시스템 소유 렌더링을 사용하고 Android는 흐린 WebView 배경을 사용합니다).

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

네이티브 페이지 전환을 앱 셸에 추가하세요.

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

라우팅된 페이지를 cap-router-outlet, cap-page, cap-content그리고 호출 setDirection('forward') 또는 setDirection('back') Capacitor live-update 대안 비교 페이지에서 HTML 텍스트 조각입니다. 역할: 장기 마케팅 또는 법률 문단. Seen in: 페이지 alternatives.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 보존하십시오. 메시지 키 `alternatives_cta_questions` (대안 CTA 질문). | Appflow 비교/이동 마케팅 복사본. 역할: 장기 마케팅 또는 법률 문단. Seen in: 페이지 ionic-appflow.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 보존하십시오. 메시지 키 `appflow_cta_questions` (Appflow CTA 질문). | Capawesome 비교 페이지에서 HTML 텍스트 조각입니다. 역할: 장기 마케팅 또는 법률 문단. Seen in: 페이지 capwesome.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 보존하십시오. 메시지 키 `capwesome_cta_questions` (Capwesome CTA 질문). | 컨설팅 서비스 페이지에서 HTML 텍스트 조각입니다. 역할: 섹션 서브 타이틀 또는 태그 라인. Seen in: 페이지 consulting.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 보존하십시오. 메시지 키 `consulting_faq_subtitle` (컨설팅 FAQ 서브 타이틀). | Appflow 비교/이동 마케팅 복사본. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. Seen in: 페이지 ionic-appflow.astro, 페이지 ionic-enterprise-plugins.astro, 페이지 solutions/ionic-enterprise-plugins.astro. 메시지 키 `appflow_plugins_or` (Appflow 플러그인 또는).

이전으로 이동하기 전에 하지 마십시오. 원래 네비게이션 소유하는 표면에 중복되는 웹 헤더 또는 푸터를 만들지 마십시오. Using @capgo/capacitor-native-navigation Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation Using @capgo/capacitor-transitions.

Using @__CAPGO_KEEP_0/CAPGO_KEEP_1__-transitions

안전 영역에 Tailwind @capgo/tailwind-capacitor @__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ tailwind-capacitor (출판된 것에 대한 참조로 사용됩니다. npm에서 제공됩니다.) safe-areas 기능 및 기타 Capacitor-친화적인 Tailwind 플러그인:

bun add -D tailwind-capacitor

In src/assets/main.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Use utilities such as pt-safe, pb-safe, and px-safe instead of manually sprinkling. The project is actively developed — if something is missing for your Vue setup, env(safe-area-inset-*) open a PR on __CAPGO_KEEP_0__ open a PR on GitHub.

iOS에서 콘텐츠가 잘려나가거나-shifted 또는 가로 스크롤이 가능하다면, 더 많은

또는 뷰포트 태그를 조정하는 것만으로는 해결되지 않는다. 이러한 체크를 순서대로 진행하십시오. overflow-x: hidden 뷰포트 메타 태그가 올바르게 적용되어 있는지 확인하십시오

뷰포트 메타 태그를

Add the viewport meta tag in index.html 내부 <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

iOS 안전 영역을 한 번에 루트 wrapper에서 처리하세요

싱글 앱 셸을 만들고 안전 영역 패딩을 거기에 적용하세요 — 여러 중첩된 컴포넌트에서 하지 마세요:

html,
body,
#app {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

모든 페이지 콘텐츠를 내부에 감싸세요 .app-shell. 중복된 안전 영역 패딩이 헤더, 모달, 레이아웃 wrapper에 있으면 UI가 잘려나거나 너무 크게 보입니다.

그리고 @capgo/tailwind-capacitor와 함께, 같은 패딩을 표현할 수 있습니다. pt-safe pb-safe px-safe 그것은

Capacitor iOS `contentInset` 에 `never` 첫 번째

In capacitor.config.ts, native inset을 사용하고 CSS (또는 Native Navigation의 )가 safe area를 관리하도록 하세요: contentInsetMode: 'css'__CAPGO_KEEP_0__의 자동 콘텐츠 inset과 CSS padding을 혼합하는 것은 두 배의 간격이 발생하는 일반적인 원인입니다.

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) 일반적으로 원인은

Tailwind

, 고정 픽셀 너비를 사용하는 요소, 또는 100vwlarge w-screen인 요소입니다. min-width.

Safari Web Inspector에서 실행하세요:

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Tailwind의 경우 w-screen 를 사용하세요 w-full 가능한 경우에. 많은 수평 방향으로의 초과 문제는 duplicated safe-area padding, 또는 고정 너비 컨테이너에서 오는 것이 아니라 viewport meta 태그 자체에서 오는 것이 아니다. 100vw / w-screen결론

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

Capacitor is a great option for building native applications based on an existing web project. With the addition of Capgo, it’s even easier to add live updates to your app, ensuring that your users always have access to the latest features and bug fixes.

Capgo 무료 계정으로 가입하세요. 오늘. __CAPGO_KEEP_0__으로부터 계속 진행하세요. Vue와 __CAPGO_KEEP_0__을 사용하여 모바일 앱을 빌드하는 방법

Vue와 Capacitor을 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하는 경우, __CAPGO_KEEP_1__-live-activities와 연결하세요.

__CAPGO_KEEP_0__ Building Mobile Apps with Vue and Capacitor __CAPGO_KEEP_0__ Using @capgo/capacitor-live-activities capgo/capacitor native 기능을 위한 capgo/capacitor-live-활동 capgo/capacitor-live-활동 구현 세부사항을 위한 capgo/capacitor-비디오 플레이어를 사용 capgo/capacitor-비디오 플레이어의 native 기능을 위한 capgo/capacitor-비디오 플레이어 capgo/capacitor-비디오 플레이어의 구현 세부사항을 위한, 그리고 capgo/capacitor-네이티브 네비게이션을 사용 capgo/capacitor-네이티브 네비게이션의 native 기능을 위한

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

Capacitor에 대해 알아보세요

Vue 앱을 준비하세요

Capacitor를 사용하여 네이티브 모바일 앱을 빌드하세요

자연어 앱 빌드 및 배포

Capacitor Live Reload

Capacitor 플러그인 사용

Native-feeling UI with Capgo Native Navigation and Transitions

Using @__CAPGO_KEEP_0/CAPGO_KEEP_1__-transitions

iOS에서 콘텐츠가 잘려나가거나-shifted 또는 가로 스크롤이 가능하다면, 더 많은

뷰포트 메타 태그를

iOS 안전 영역을 한 번에 루트 wrapper에서 처리하세요

Capacitor iOS `contentInset` 에 `never` 첫 번째

Tailwind

Vue와 Capacitor을 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하는 경우, __CAPGO_KEEP_1__-live-activities와 연결하세요.

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

Capacitor에 대해 알아보세요

Vue 앱을 준비하세요

Capacitor를 사용하여 네이티브 모바일 앱을 빌드하세요

자연어 앱 빌드 및 배포

Capacitor Live Reload

Capacitor 플러그인 사용

Native-feeling UI with Capgo Native Navigation and Transitions

Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions

iOS에서 콘텐츠가 잘려나가거나-shifted 또는 가로 스크롤이 가능하다면, 더 많은

뷰포트 메타 태그를

iOS 안전 영역을 한 번에 루트 wrapper에서 처리하세요

Capacitor iOS contentInset 에 never 첫 번째

Tailwind

Vue와 Capacitor을 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하는 경우, __CAPGO_KEEP_1__-live-activities와 연결하세요.

Using @__CAPGO_KEEP_0/CAPGO_KEEP_1__-transitions

Capacitor iOS `contentInset` 에 `never` 첫 번째