Construire des applications mobiles avec Vue et Capacitor

In ce tutoriel, nous vous guiderons à travers le processus de conversion d'une application web Vue en application mobile native en utilisant Capacitor. Vous pouvez également améliorer votre interface utilisateur mobile avec Konsta UI, une bibliothèque d'interface utilisateur mobile basée sur Tailwind CSS.

À propos de Capacitor

Capacitor est un outil révolutionnaire qui vous permet d'intégrer facilement Capacitor dans tout projet web et de convertir votre application en application mobile native. Il génère des projets Xcode et Android Studio natifs pour vous et vous donne accès aux fonctionnalités de dispositif natif comme la caméra à travers un pont JavaScript.

Préparation de votre application Vue

Tout d'abord, créez une nouvelle application Vue en exécutant la commande suivante :

vue create my-app
cd my-app
npm install

Pour préparer votre application Vue pour la mise en production mobile native, vous aurez besoin d'exporter votre projet. Ajoutez un script dans votre fichier package.json pour construire et copier le projet Vue :

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

Après avoir exécuté la build commande, vous devriez voir un nouveau dist dossier dans le répertoire root de votre projet. Ce dossier sera utilisé par Capacitor plus tard.

Intégration de Capacitor à votre application Vue

Pour convertir votre application web Vue en conteneur mobile natif, suivez ces étapes :

Installez le Capacitor CLI en tant que dépendance de développement et configurez-le dans votre projet. Acceptez les valeurs par défaut pour le nom et l'ID de l'application pendant la configuration.
Installez le package de base et les packages pertinents pour les plateformes iOS et Android.
Ajoutez les plateformes, et Capacitor créera des dossiers pour chaque plateforme à la racine de votre projet :

# 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

Vous devriez maintenant voir de nouveaux dossiers iOS et dossiers Android dans votre projet Vue.

Mettez à jour le capacitor.config.json fichier pour pointer vers répertoire web Vers le résultat de votre commande de build :

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

Maintenant, vous pouvez construire votre projet Vue et le synchroniser avec Capacitor:

npm run build
npx cap sync

Construire et Déployer des Applications Natives

Pour développer des applications iOS, vous avez besoin d'Xcode installé, et pour les applications Android, vous avez besoin d'Android Studio installé. De plus, vous devez vous inscrire au programme Apple Developer pour les applications iOS et au Google Play Console pour les applications Android pour distribuer votre application sur l'app store.

Utilisez les Capacitor CLI pour ouvrir les deux projets natives :

npx cap open ios
npx cap open android

Déployez votre application sur un appareil connecté en utilisant Android Studio ou Xcode.

Capacitor Live Reload

Activer le rechargement en direct sur votre appareil mobile en faisant en sorte que l'application Capacitor charge le contenu à partir d'une URL spécifique sur votre réseau.

Trouvez votre adresse IP locale et mettez à jour le capacitor.config.ts fichier avec l'adresse IP et le port corrects :

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;

Appliquez ces modifications en les copiant vers votre projet native :

npx cap copy

Maintenant, votre application se réactualisera automatiquement et affichera les modifications lorsque vous mettez à jour votre application Vue.

Utilisation des Capacitor Plugins

Installez un Capacitor plugin, comme le plugin de partage, et utilisez-le dans votre application Vue :

npm i @capacitor/share

Importez le package et appelez la share() fonction dans votre application :

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

Après l'installation de nouveaux plugins, exécutez la sync commande et rédeployez l'application sur votre appareil :

npx cap sync

Ajout de Konsta UI

Pour utiliser Konsta UI dans votre application Vue, vous devez avoir tailwind déjà installé et installer le package : tailwind.config.js Pour utiliser Konsta UI dans votre application Vue, installez le package et modifiez votre fichier :

npm i konsta

Enveloppez votre application avec le composant dans le fichier, et utilisez les composants Konsta UI Vue dans vos pages Vue. App composant dans le fichier pages/_app.vue fichier, et utilisez les composants Konsta UI Vue dans vos pages Vue.

Conclusion

Capacitor est une excellente option pour créer des applications natives basées sur un projet web existant. Avec l'ajout de Capgo, il est encore plus facile d'ajouter des mises à jour en temps réel à votre application, vous assurant que vos utilisateurs ont toujours accès aux dernières fonctionnalités et corrections de bogues.

Découvrez comment Capgo peut vous aider à créer des applications meilleures et plus rapides, Inscrivez-vous pour un compte gratuit aujourd'hui.

Continuez de Building Mobile Apps with Vue et Capacitor

Si vous utilisez Building Mobile Apps with Vue et Capacitor pour planifier le comportement des médias et de l'interface native, connectez-le avec En utilisant @capgo/capacitor-activités en direct pour la capacité native dans En utilisant @capgo/capacitor-activités en direct @capgo/capacitor-activités en direct pour le détail d'implémentation dans @capgo/capacitor-activités en direct En utilisant @capgo/capacitor-joueur de vidéo pour la capacité native dans En utilisant @capgo/capacitor-joueur de vidéo @capgo/capacitor-joueur de vidéo pour le détail d'implémentation dans @capgo/capacitor-joueur de vidéo, et En utilisant @capgo/capacitor-navigation native pour la capacité native dans En utilisant @capgo/capacitor-navigation native

Créer des applications mobiles avec Vue et Capacitor