Costruisci applicazioni 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. Inoltre, potete anche migliorare l'interfaccia utente mobile con Konsta UI, una libreria di interfacce utente mobile basata su Tailwind CSS.

Di Capacitor

Capacitor è uno strumento rivoluzionario che consente di integrare facilmente il suo codice 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 a 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 file package.json per costruire e copiare il progetto Vue:

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

Dopo l'esecuzione del comando, dovresti vedere un nuovo cartella nella directory radice del tuo progetto. Questa cartella sarà utilizzata da __CAPGO_KEEP_0__ in seguito. build Aggiunta di __CAPGO_KEEP_0__ all'App Vue dist Aggiunta di Capacitor all'App Vue

Aggiunta di Capacitor all'App Vue

Per convertire la tua app web Vue in un contenitore mobile nativo, segui questi passaggi:

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.
Installa il pacchetto di base e i pacchetti pertinenti per le piattaforme iOS e Android.
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

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

Aggiorna il capacitor.config.json file per puntare directory web verso del comando di costruzione:

{
  "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 applicazioni 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.

Usa i 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 live reload sul tuo dispositivo mobile facendo caricare l'app Capacitor 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 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 i 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 aver installato nuovi plugin, esegui il sync comando e riavvia l'app sul tuo dispositivo:

npx cap sync

Aggiungere Konsta UI

Per utilizzare Konsta UI nel tuo app Vue, hai bisogno di avere già installato e di installare il pacchetto: Per utilizzare Konsta UI nel tuo app Vue, installa il pacchetto e modifica il tuo tailwind.config.js file:

npm i konsta

Avvolgi la tua app con il App componente nel pages/_app.vue file, e utilizza i componenti UI Konsta Vue nelle tue pagine Vue.

Conclusion

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'app, assicurando che i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Impara come Capgo possa aiutarti a costruire applicazioni migliori in modo più veloce, iscrivi un account gratuito oggi.

Continua da Building Mobile Apps con Vue e Capacitor

Se stai utilizzando Building Mobile Apps con Vue e Capacitor per pianificare il comportamento dei media e dell'interfaccia nativi, 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-di-video per la capacità nativa in Usando @capgo/capacitor-player-di-video @capgo/capacitor-player-di-video per il dettaglio di implementazione in @capgo/capacitor-player-di-video, e Usando @capgo/capacitor-navigazione-nativa per la capacità nativa in Usando @capgo/capacitor-navigazione-nativa

Creare App Mobili con Vue e Capacitor