capacitore framework7 javascript mobile app starter template Téléchargement - capacitore framework7 javascript mobile app starter template Source Téléchargement

capacitore framework7 javascript mobile app starter template

Autre code source

1.0.0

Télécharger

Démo

Options de CLI Framework7

Application Framework7 créée avec les options suivantes:

 {
  "cwd": "/home/mateen/Documents/office data/mobile-apps/Framework7",
  "type": [
    "capacitor"
  ],
  "name": "Demo",
  "framework": "core",
  "template": "split-view",
  "bundler": "vite",
  "cssPreProcessor": "less",
  "theming": {
    "customColor": false,
    "color": "#007aff",
    "darkMode": false,
    "iconFonts": true
  },
  "customBuild": true,
  "customBuildConfig": {
    "rtl": false,
    "darkTheme": true,
    "lightTheme": true,
    "themes": [
      "ios",
      "md"
    ],
    "components": [
      "dialog",
      "popup",
      "login-screen",
      "popover",
      "actions",
      "sheet",
      "toast",
      "preloader",
      "progressbar",
      "sortable",
      "swipeout",
      "accordion",
      "contacts-list",
      "virtual-list",
      "list-index",
      "timeline",
      "tabs",
      "panel",
      "card",
      "chip",
      "form",
      "input",
      "checkbox",
      "radio",
      "toggle",
      "range",
      "stepper",
      "smart-select",
      "grid",
      "calendar",
      "picker",
      "infinite-scroll",
      "pull-to-refresh",
      "data-table",
      "fab",
      "searchbar",
      "messages",
      "messagebar",
      "swiper",
      "photo-browser",
      "notification",
      "autocomplete",
      "tooltip",
      "gauge",
      "skeleton",
      "color-picker",
      "treeview",
      "text-editor",
      "area-chart",
      "pie-chart",
      "breadcrumbs",
      "typography"
    ]
  },
  "pkg": "io.framework7.myapp",
  "capacitor": {
    "platforms": [
      "ios",
      "android"
    ]
  }
}

Installer des dépendances

Tout d'abord, nous avons besoin pour installer des dépendances, exécuter dans le terminal

 npm install

Scripts NPM

start - Exécuter le serveur de développement
? dev - Exécuter le serveur de développement
? build - COMMEZ l'application Web pour la production
build-capacitor-ios - créez l'application et copiez-la dans le projet de condensateur iOS
build-capacitor-android - créez l'application et copiez-la dans le projet Android Capacitor

Vite

Il y a une configuration de Bundler Vite. Il compile et regroupe toutes les ressources "frontal". Vous devez travailler uniquement avec des fichiers situés dans le dossier /src . Vite Config situé dans vite.config.js .

Condensateur

Ce projet créé avec le support des condensateurs. Et la première chose requise avant le démarrage est d'ajouter des plates-formes de condensateurs, exécutées dans le terminal:

 npx cap add ios && npx cap add android

Consultez la documentation officielle du condensateur pour plus d'exemples et d'exemples d'utilisation.

Actifs

Images source actifs (icônes, écrans de éclaboussures) situés dans le dossier assets-src . Pour générer vos propres icônes et vos images d'écran d'éclaboussures, vous devrez remplacer tous les actifs de ce répertoire par vos propres images (faites attention à la taille et au format de l'image) et exécuter la commande suivante dans le répertoire du projet:

 framework7 assets

Ou lancez l'interface utilisateur où vous pourrez changer les icônes et les écrans d'éclaboussure:

 framework7 assets --ui

Actifs de condensateur

Les actifs des condensateurs sont situés dans le dossier resources qui est destiné à être utilisé avec l'outil cordova-res . Pour générer des actifs d'applications mobiles exécutés dans le terminal: