Creare App Mobili con Vue e Capacitor

In questo tutorial, vi guideremo attraverso il processo di conversione di un'applicazione web Vue in un'applicazione mobile nativa utilizzando Capacitor. Potete anche aggiungere la Capgo di navigazione nativa e transizioni per un'applicazione mobile nativa e utilizzare tailwind-capacitor per aree sicure.

Sull'Capacitor

L'Capacitor è uno strumento rivoluzionario che consente di integrare facilmente qualsiasi progetto web e convertire l'applicazione in un'applicazione mobile nativa. Genera progetti Xcode e Android Studio nativi per te e fornisce accesso alle funzionalità di dispositivo nativo come la fotocamera attraverso un ponte JavaScript.

Preparazione dell'app Vue

Prima di tutto, crea una nuova app Vue eseguendo il seguente comando:

vue create my-app
cd my-app
npm install

Per preparare l'app Vue per la distribuzione mobile nativa, avrai bisogno di esportare il progetto. Aggiungi uno script nel tuo file package.json per costruire e copiare il progetto Vue:

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

Dopo l'esecuzione del build comando, dovresti vedere un nuovo dist folder nella directory radice del tuo progetto. Questo folder verrà utilizzato dall'Capacitor in seguito.

Aggiunta dell'Capacitor all'app Vue

To convert your Vue web app into a native mobile container, follow these steps:

1. Installa il Capacitor CLI come dipendenza di sviluppo e configuralo all'interno del tuo progetto. Accetta i valori predefiniti per nome e ID bundle durante la configurazione.

2. Installa il pacchetto di base e i pacchetti pertinenti per le piattaforme iOS e Android.

3. Aggiungi le piattaforme e Capacitor creerà cartelle per ogni piattaforma nella radice del tuo progetto:

# 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

Ora dovresti vedere nuove cartelle: iOS e context: Pagina/Area: Sito web di marketing Capgo. Ruolo: Etichetta breve UI o elemento di navigazione. Visto in: pagina trust.astro. Chiave messaggio `e` (E). android

cartelle nel tuo progetto Vue. capacitor.config.json __CAPGO_KEEP_0__.config.json webDir alla risultato del comando di build:

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

Ora, puoi costruire il tuo progetto Vue e sincronizzarlo con Capacitor:

npm run build
npx cap sync

Costruire e Distribuire App Native

Per sviluppare app iOS, hai bisogno di Xcode installato, e per app Android, hai bisogno di Android Studio installato. Inoltre, devi iscriverti al Apple Developer Program per iOS e al Google Play Console per Android per distribuire la tua app sul negozio di app.

Utilizza i Capacitor CLI per aprire entrambi i progetti nativi:

npx cap open ios
npx cap open android

Deploy la tua app su un dispositivo connesso utilizzando Android Studio o Xcode.

Capacitor Live Reload

Abilita il live reload sul tuo dispositivo mobile facendo caricare l'app Capacitor il contenuto da una specifica URL del tuo network.

Trovare l'indirizzo IP locale e aggiornare il capacitor.config.ts file con l'indirizzo IP e il port corretto:

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;

Applicare queste modifiche copiando i file nel tuo progetto nativo:

npx cap copy

Now, your app will automatically reload and show changes when you update your Vue app.

Utilizzando plugin Capacitor

Installa un plugin Capacitor, come ad esempio il plugin di condivisione, e utilizzalo nel tuo app Vue:

npm i @capacitor/share

Importa il pacchetto e chiama la share() funzione nel tuo app:

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

Dopo l'installazione di nuovi plugin, esegui il comando e ri-deploy l'app sul tuo dispositivo: sync Successivamente, puoi rendere l'app più nativa su iOS e Android con la navigazione e le transizioni __CAPGO_KEEP_0__, e risolvi i problemi di layout comuni su iOS che causano overflow orizzontale o aree sicure tagliate.

npx cap sync

Interfaccia utente nativa con navigazione e transizioni Capgo

Native-feeling UI with Capgo Native Navigation and Transitions

Ionic per costruire applicazioni cross-platform, ma integrarla con Vue è un processo hacky e raramente vale la pena quando già hai Vue Tailwind CSS.

Per un aspetto nativo su mobile in un'app Vue + Capacitor, utilizza i plugin Capgo al posto di kit UI web come Konsta UI:

• @capgo/capacitor-native-navigation — barra di navigazione nativa, Liquid Glass bar delle schede su iOS, e uno stile di barra delle schede sfocato su Android. Lo stato delle rotte del tuo router Vue viene mantenuto; il plugin gestisce la barra di navigazione nativa.
• @capgo/capacitor-transitions — transizioni di pagina dello stile Ionic e swipe indietro su iOS nell' layer WebView, senza adottare l'UI di Ionic.

Installa entrambi:

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

Configura la navigazione nativa con il CSS inset mode affinché il contenuto web rispetti le barre native:

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

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

Rendi una barra delle schede di vetro liquido (su iOS si utilizza la rendering di sistema; su Android si utilizza un sfondo sfocato di 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}`);
});

Aggiungi transizioni di pagina native nel contenitore della tua app:

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

Avvolgi le pagine di destinazione in cap-router-outlet, cap-pagee cap-contentEcco, e chiama setDirection('forward') o setDirection('back') Ecco alcune delle alternative che puoi utilizzare prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa gestisce queste superfici.

Vedi le guide complete: Utilizzare @capgo/capacitor-navigazione nativa e Utilizzare @capgo/capacitor-transizioni.

Zone sicure con Tailwind

Per le aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor Pubblicato su tailwind-capacitor @npm. safe-areas strumenti e altri plugin di Tailwind compatibili con Capacitor:

bun add -D tailwind-capacitor

In src/assets/main.css:

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

Utilizza strumenti come pt-safe, pb-safe, e px-safe invece di spargere env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione Vue, apri una PR su GitHub.

Risolvere problemi di layout iOS (Viewport, Area sicura, e sovrapposizione orizzontale)

Se il contenuto sembra essere tagliato, spostato o scrollabile orizzontalmente su iOS, aggiungere più overflow-x: hidden o modificare il tag viewport da solo non risolve di solito il problema. Passa attraverso questi controlli in ordine.

Assicurati che il tag meta viewport sia applicato correttamente

Aggiungi il tag meta viewport in index.html all'interno <head>:

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

Gestisci l'area di sicurezza di iOS da un wrapper radice solo

Crea un unico contenitore dell'applicazione e applica il padding dell'area di sicurezza lì — non nei componenti nidificati multipli:

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);
}

Avvolgi tutto il contenuto della pagina all'interno .app-shell. Il padding dell'area di sicurezza duplicato nei titoli, nei modali e nei wrapper di layout spesso fa sembrare l'interfaccia utente tagliata o troppo grande.

Con @capgo/tailwind-capacitorpuoi esprimere lo stesso padding con utilità come pt-safe pb-safe px-safe su quel singolo contenitore.

Imposta Capacitor iOS contentInset a never context":"Pagina/area: Pagina di prodotti con aggiornamenti in tempo reale. Ruolo: Etichetta di navigazione breve o elemento di navigazione. Chiave di messaggio `live_update_dynamic_label_to` (Etichetta di aggiornamento dinamico Live Update To)."

In capacitor.config.ts, prefer native inset disabled and let CSS (o Native Navigation’s) contentInsetMode: 'css') own the safe area:

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

Mixing Capacitor’s automatic content inset con CSS env(safe-area-inset-*) Find the elemento che sta effondando

Il solito colpevole è un elemento che utilizza

, Tailwind 100vw, un'altezza fissa in pixel, o un grande w-screenIn Safari Web Inspector, esegui: min-width.

Con Tailwind, sostituisci

[...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,
  }));

con w-screen with w-full quando possibile. Molti problemi di sovrapposizione orizzontale derivano da 100vw / w-screenun padding di area sicura duplicato, o da un contenitore di larghezza fissata — non dal tag meta del viewport stesso.

Conclusioni

Capacitor è una grande opzione per costruire applicazioni native basate su un progetto web esistente. Con l'aggiunta di Capgo, è ancora più facile aggiungere aggiornamenti in tempo reale all'applicazione, assicurando che gli utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Scopri come Capgo possa aiutarti a costruire applicazioni migliori in modo più veloce iscrivi il tuo account gratuito oggi.

Continua da Costruire Applicazioni Mobili con Vue e Capacitor

Se stai utilizzando Costruire Applicazioni Mobili con Vue e Capacitor per pianificare il comportamento di media e interfaccia nativa, connettilo con Usando @capgo/capacitor-live-activities per la capacità nativa in Utilizzare @capgo/capacitor-attività-in-vivo @capgo/capacitor-attività-in-vivo per il dettaglio di implementazione in @capgo/capacitor-attività-in-vivo Utilizzare @capgo/capacitor-lettore-di-video per la capacità nativa in Utilizzare @capgo/capacitor-lettore-di-video @capgo/capacitor-lettore-di-video per il dettaglio di implementazione in @capgo/capacitor-lettore-di-video, e Utilizzare @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzare @capgo/capacitor-navigazione-nativa