Creare App Mobili con Vue e Capacitor

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

Sul Capacitor

Capacitor è uno strumento rivoluzionario che consente di integrare facilmente in 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 tuo 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 della richiesta, dovresti vedere una nuova cartella nella directory radice del tuo progetto. Questa cartella verrà utilizzata da __CAPGO_KEEP_0__ in seguito. build Dopo l'esecuzione della richiesta, dovresti vedere una nuova cartella nella directory radice del tuo progetto. Questa cartella verrà utilizzata da __CAPGO_KEEP_0__ in seguito. dist Aggiungere Capacitor al tuo App Vue

Adding Capacitor to Your Vue App

Installa il __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ come dipendenza di sviluppo e configuralo nel tuo progetto. Accetta i valori predefiniti per nome e ID bundle durante la configurazione.

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

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

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

iOS e android Dovresti vedere ora nuove cartelle per cartelle nel tuo progetto Vue.

Aggiorna il file capacitor.config.json per puntare la webDir al risultato del tuo 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

Costruisci e distribuisci 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 il Capacitor CLI per aprire entrambi i progetti nativi:

npx cap open ios
npx cap open android

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

Capacitor Live Reload

Abilita il ricarica in tempo reale sul tuo dispositivo mobile avendo l'app Capacitor caricare il contenuto da una specifica URL del tuo network.

Trova l'indirizzo IP locale e aggiorna il capacitor.config.ts file con l'indirizzo IP e il port corretti:

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;

Applica queste modifiche copiandole sul tuo progetto nativo:

npx cap copy

Ora, la tua app si ricaricherà automaticamente e mostrerà le modifiche quando aggiorni la tua app Vue.

Utilizzando Capacitor Plugins

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

npm i @capacitor/share

Importa il pacchetto e chiama la share() funzione nella tua 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 aver installato nuovi plugin, esegui il sync comando e ri-deploy l'app sul tuo dispositivo:

npx cap sync

Successivamente, puoi rendere l'app più nativa su iOS e Android con Capgo navigazione e transizioni, e risolvi i problemi di layout comuni su iOS che causano overflow orizzontale o aree sicure tagliate.

Interfaccia nativa con Capgo Navigazione e Transizioni native

Ho lavorato per anni con Ionic per costruire applicazioni cross-platform, ma integrarla con Vue è un po' complicato e non vale la pena quando già hai Tailwind CSS.

Per un aspetto mobile nativo in un'app Vue + Capacitor, utilizza invece 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 stile bar delle schede sfocata su Android. Il tuo router Vue mantiene lo stato delle rotte; il plugin gestisce il chrome nativo.
• @capgo/capacitor-transitions — transizioni di pagina dello stile Ionic e swipe indietro su iOS nel layer WebView, senza adottare il kit UI Ionic.

Installa entrambi:

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

Configura la navigazione nativa con modalità CSS inset 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',
  },
});

Visualizza una barra di navigazione in vetro liquido (iOS utilizza la rendering di proprietà del sistema; Android utilizza un sfondo di WebView sfocato):

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 tuo shell di 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 routing in cap-router-outlet, cap-page, e cap-content, e chiama setDirection('forward') o setDirection('back') prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa possiede queste superfici.

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

Aree sicure con Tailwind

Per aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor (pubblicato come tailwind-capacitor su npm). Fornisce safe-areas utilità e altri plugin 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 utilità come pt-safe, pb-safe, e px-safe al posto di spruzzare env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione Vue, apri un PR su GitHub.

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

If il contenuto sembra essere tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere più o modificare la riga di taglio viewport da solo non risolve di solito il problema. Lavora attraverso questi controlli in ordine. overflow-x: hidden Assicurati che la meta tag viewport sia applicata correttamente

Aggiungi la meta tag viewport in

all'interno index.html Assicurati di gestire l'area di sicurezza di iOS da un wrapper root solo <head>:

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

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

Avvolgi tutto il contenuto della pagina all'interno

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

La duplicazione del padding dell'area di sicurezza nei titoli, nei modali e nei wrapper di layout spesso fa sembrare il UI tagliato o troppo grande. .app-shellCon

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor__CAPGO_KEEP_0__ pt-safe pb-safe px-safe On quel singolo shell.

Imposta Capacitor iOS contentInset su never primo

In capacitor.config.ts, preferisci l'inserimento nativo disabilitato e lascia che CSS (o la navigazione nativa) gestisca l'area sicura: contentInsetMode: 'css'Mescolare __CAPGO_KEEP_0__’s automatico contenuto inset con CSS

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-*) Trovare l'elemento che sta veramente sovrascrivendo.

L'elemento solito colpevole è un elemento che utilizza

, Tailwind 100vwpreferisci l'inserimento nativo disabilitato e lascia che CSS (o la navigazione nativa) gestisca l'area sicura w-screen, una larghezza di pixel fissi, o una grande min-width.

In Safari Web Inspector, esegui:

[...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 Tailwind, sostituisci w-screen con w-full quando possibile. Molti problemi di sovrapposizione orizzontale derivano da 100vw / w-screen, sovrapposizione di padding di area sicura duplicata, o da un contenitore di larghezza fissata — non dal tag meta di 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 i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Scopri come Capgo può aiutarti a costruire applicazioni migliori in modo più veloce, iscrivi oggi.

Continua a costruire da Building Mobile Apps con Vue e Capacitor

Se stai utilizzando Sviluppare App Mobili con Vue e Capacitor per pianificare il comportamento di media e interfaccia nativa, connettilo con Usando @capgo/capacitor-live-attività per la capacità nativa in Usando @capgo/capacitor-live-attività, @capgo/capacitor-live-attività per il dettaglio di implementazione in @capgo/capacitor-live-attività, Usando @capgo/capacitor-player-video per la capacità nativa in Usando @capgo/capacitor-player-video, @capgo/capacitor-player-video per il dettaglio di implementazione in @capgo/capacitor-player-video, e Usando @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzare @capgo/capacitor-navigazione nativa.